<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 6.3.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"chuangges.gitee.io","root":"/","scheme":"Pisces","version":"7.8.0","exturl":false,"sidebar":{"position":"right","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":true,"show_result":true,"style":"mac"},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":false,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
  </script>

  <meta name="description" content="入门简介、视图层、逻辑层、组件开发">
<meta property="og:type" content="article">
<meta property="og:title" content="微信小程序入门">
<meta property="og:url" content="https://chuangges.gitee.io/2019/07/07/9-1-%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%85%A5%E9%97%A8/index.html">
<meta property="og:site_name" content="闯哥要去流浪了">
<meta property="og:description" content="入门简介、视图层、逻辑层、组件开发">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://chuangges.gitee.io/images/webchat/framework.png">
<meta property="og:image" content="https://chuangges.gitee.io/images/webchat/com.png">
<meta property="article:published_time" content="2019-07-06T16:22:18.000Z">
<meta property="article:modified_time" content="2024-03-01T02:17:33.796Z">
<meta property="article:author" content="chuangges">
<meta property="article:tag" content="移动端开发">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://chuangges.gitee.io/images/webchat/framework.png">

<link rel="canonical" href="https://chuangges.gitee.io/2019/07/07/9-1-%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%85%A5%E9%97%A8/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>微信小程序入门 | 闯哥要去流浪了</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

<link rel="alternate" href="/atom.xml" title="闯哥要去流浪了" type="application/atom+xml">
</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">闯哥要去流浪了</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
      <p class="site-subtitle" itemprop="description">愿你岁月可回首，且以深情共白头</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>

  </li>
  </ul>
</nav>




</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>
  <div class="reading-progress-bar"></div>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://chuangges.gitee.io/2019/07/07/9-1-%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%85%A5%E9%97%A8/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/chuang.png">
      <meta itemprop="name" content="chuangges">
      <meta itemprop="description" content="chuangge's blog.">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="闯哥要去流浪了">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          微信小程序入门
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2019-07-07 00:22:18" itemprop="dateCreated datePublished" datetime="2019-07-07T00:22:18+08:00">2019-07-07</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2024-03-01 10:17:33" itemprop="dateModified" datetime="2024-03-01T10:17:33+08:00">2024-03-01</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%BC%80%E5%8F%91/" itemprop="url" rel="index"><span itemprop="name">移动端开发</span></a>
                </span>
            </span>

          <br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="far fa-file-word"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>37k</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="far fa-clock"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>34 分钟</span>
            </span>
            <div class="post-description">入门简介、视图层、逻辑层、组件开发</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h1 id="一、入门简介"><a href="#一、入门简介" class="headerlink" title="一、入门简介"></a>一、入门简介</h1><blockquote>
<p>微信朋友圈用于好友之间沟通信息，订阅号用于面向粉丝推送信息，小程序则提供了用户和服务互动的手段。小程序是一种运行于微信和支付宝等环境并具有原生体验和快速加载等特点的轻量级应用，混合开发模式虽然针对 weixinJSBrige 封装扩展出 SDK 而支持了移动网页调用原生功能但并没有解决复杂项目的页面白屏、切换生硬、点击迟滞等不良体验问题。</p>
</blockquote>
<h2 id="主要特点"><a href="#主要特点" class="headerlink" title="主要特点"></a>主要特点</h2><ul>
<li><strong>跨平台、无需安装、https 保证安全、官方组件不可扩展、rpx 单位自适应</strong>。</li>
<li><strong>离线能力</strong>：返回时显示历史 View，退出时不销毁 View 状态而保持一定时间。</li>
<li><strong>双线程架构</strong>：视图层通过多个 webview 线程来渲染页面，逻辑层通过一个 AppServer 线程实现逻辑处理和接口调用等，两者通过微信平台的系统层 JSBridge 中转而实现双向通信和原生功能，这种模式提升了安全性并避免了操作 DOM 但也带来了各种异步问题。</li>
<li>Native 会预先新建 <strong>WebView</strong>，打开新页面时渲染默认数据并通过 <strong>Virtual DOM</strong> 局部更新。</li>
<li><strong>去中心化</strong>：微信没有提供类似小程序商店的安装平台，传播时需通过二维码、群分享等手段。</li>
<li><strong>区别 H5</strong>：可获得网络状态等系统权限、解析器基于浏览器内核重构而没有 DOM&#x2F;BOM、逻辑层和渲染层在不同线程相互独立运行而 H5 代码在单线程会互斥而可能失去响应。</li>
<li><strong>程序限制</strong>：只能运行于微信环境、不可扩展新组件、不支持 a 标签、无法打开网页和唤起 APP、不支持级联选择器和本地资源加载、不支持 window&#x2F;document、不能和公众号重名。</li>
<li><strong>数量限制</strong>：同时打开的页面最多为 5、wx.request 最大并发数为 10、导航栏只能配置 2–5。</li>
<li><strong>最大限制</strong>：setStorage 缓存 10MB、setData 单次数据 1M、icon 40kb、源码编译后 2MB。</li>
<li><strong>注意事项</strong>：<code>HTTPS</code> 域名必须保证、<code>input placeholder</code> 字体颜色可通过 placeholder-class、<code>wx.navigateTo</code> 无法跳转到带 tabbar 页面、<code>tabbar</code> 切换时页面数据无法刷新、去掉自定义 <code>button</code> 灰色的圆角边框、最外层标签的 <code>margin-bottom</code> 在 IOS 不生效、<code>canvas</code> 图片不支持 base64 格式、pageScrollTo 回到页面顶部、<code>setStorageSync(key, value) setStorage(&#123;key: &#39;&#39;, value: &#39;&#39;&#125;)</code> 用法区别、<code>new Date(&#39;2024-02-20&#39;)</code> 通过将时间格式中的 - 全部改为 &#x2F; 来解决跨平台兼容性、<code>getSystemInfoSync().windowHeight</code> 在部分设备不准备、本地图片命名时尽量使用小写、如何获取微信群名称。</li>
</ul>
<table>
<thead>
<tr>
<th>运行环境</th>
<th>逻辑层</th>
<th>视图层</th>
</tr>
</thead>
<tbody><tr>
<td>IOS</td>
<td>JSCore</td>
<td>WKWebView</td>
</tr>
<tr>
<td>Android</td>
<td>X5-JSCore &#x2F; V8</td>
<td>X5 &#x2F; XWeb 内核</td>
</tr>
<tr>
<td>开发者工具</td>
<td>NWJS</td>
<td>Chromium Webview</td>
</tr>
</tbody></table>
  <div align="center">
      <img src="" data-original="/images/webchat/framework.png" alt="架构模型" width="100%">
  </div>


<h2 id="核心机制"><a href="#核心机制" class="headerlink" title="核心机制"></a>核心机制</h2><ul>
<li><strong>运行机制</strong><ul>
<li>热启动：用户再次打开小程序时不用重新启动，只需将后台态的小程序切换到前台。</li>
<li>冷启动：用户首次打开或小程序被微信主动销毁后再次打开时，需要重新加载启动。</li>
<li>销毁：小程序后台维持运行状态一定时间或系统资源占用过高时，会被微信主动销毁。</li>
<li>启动过程：下载包、解析 app.json、执行 app.js App() 并渲染出首页、启动完成。</li>
<li>页面渲染：加载 page.json、加载 wxml wxss、执行 page.js Page()、渲染完成。</li>
</ul>
</li>
<li><strong>更新机制</strong><ul>
<li>开发者在后台发布新版本之后，24 小时之内而不会马上将新版本信息更新到用户。</li>
<li>冷启动时会检查新版本并异步下载代码包和本地包启动，下次冷启动会应用新版本。</li>
<li>如果想让用户使用最新小程序，可通过 wx.getUpdateManager 实现检查更新功能。</li>
</ul>
</li>
<li><strong>渲染机制</strong><ul>
<li>渲染方式：web 渲染、Native 原生渲染、Hybrid 混合渲染。</li>
<li>具体流程：视图层将 WXML 转换为虚拟 DOM、逻辑层数据更新时 setData 会将数据通过 Native 转发到视图层、视图层渲染最新虚拟 DOM 并将新旧差异应用在真实 DOM。</li>
<li>页面渲染：逻辑层和渲染层在两个线程分别通过 wxml wxss 编译器执行 wcc index.wxml、wcsc index.wxss 生成 js。</li>
</ul>
</li>
<li><strong>通信机制</strong><ul>
<li>视图层与底层：IOS 通过 WKWebView messageHandlers，安卓则向 WebView window 注入原生方法。封装为包含调用 invoke、监听 on 的中间层 WeiXinJSBridge。</li>
<li>逻辑层与底层：IOS 向框架 JavaScripCore 注入一个全局的原生方法，安卓则向 WebView window 对象注入一个原生方法。最终封装为 WeiXinJSBridge 兼容中间层。</li>
<li>视图层和逻辑层：WebView、JsCore 两个线程的通信会通过 Native 微信客户端转发。</li>
</ul>
</li>
<li><strong>组件系统</strong><ul>
<li>基础组件：webview 渲染、基于内置在小程序基础库的 Exparser 框架实现的视图容器、表单组件、导航组件等内置组件和自定义组件，Exparser 基于 WebComponents ShadowDOM 模型但是不依赖其它库和浏览器的原生支持而且可在纯 JS 环境运行。</li>
<li>原生组件：Native 原生渲染、客户端原生实现的内置组件比如 camera、canvas、input、live-player&#x2F;pusher、map、textarea、video。它们脱离了 WebView 渲染流程并且提高了性能，但存在以下使用限制：1. 组件层级最高而会覆盖普通组件、、2. 不支持样式 (动画、position: fixed、overflow: hidden)、、3. 不支持事件 (bind:eventname 监听、catch&#x2F;capture 绑定)、、4. 遮挡 vConsole 弹出的调试面板而建议真机调试。</li>
</ul>
</li>
<li><strong>基础库</strong><ul>
<li>简介：JS 编写并被注入到视图层和逻辑层运行的一组基础文件，主要可分为提供解析器和数据绑定等核心功能的公共库、提供请求和动画等额外功能的扩展库。小程序开发者工具编写的代码会被自动编译为可执行代码并通过基础库提供的 API 与微信进行交互。</li>
<li>功能：渲染层构建元素的组件、逻辑层处理业务的 API、数据绑定和事件等框架逻辑。</li>
<li>特点：提前内置到微信而不会打包到小程序代码、渲染层和逻辑层在页面预渲染时由两个线程注入基础库 WebView&#x2F;AppService、可在后台设置版本并在微信发布时更新。</li>
</ul>
</li>
</ul>
<h2 id="注册开发"><a href="#注册开发" class="headerlink" title="注册开发"></a>注册开发</h2><ul>
<li><strong>直接注册</strong>：微信公众平台的注册页面填写信息、邮箱激活、信息登记 (个人无法用微信认证)。</li>
<li><strong>已认证的公众号复用资质快速注册</strong>：微信公众平台的管理后台选择小程序、小程序管理并点击注册、管理员通过二维码扫描验证选择复用资质并勾选主体资质&#x2F;运营者信息&#x2F;微信认证资质、小程序页面上填写帐号信息后通过邮箱激活。这种方式可以省去提交材料和认证费等步骤。</li>
<li><strong>成员管理</strong>：管理员可添加删除参与小程序开发运营的项目成员并设置角色(开发者&#x2F;运营者&#x2F;数据分析者)、管理员和项目成员可以添加删除小程序内测的体验人员。</li>
<li><strong>发布上线</strong>：点击开发者工具顶部工具栏的上传按钮后填写版本号和项目备注而<strong>上传代码</strong>、查看登录小程序管理后台–管理–版本管理–开发版本而<strong>查看版本</strong>、开发版本的列表点击<strong>提交审核</strong>、管理员的微信收到审核通知后在审核版本的列表点击<strong>发布</strong>按钮。</li>
</ul>
<hr>
<ul>
<li><strong>稳定版开发者工具开发项目</strong>：<strong>前端开发</strong>通过填写唯一标识 AppID 等信息新建项目 (没有注册生成小程序账号则可直接选择随机生成但不能发布的测试账号) 后进行编译预览&#x2F;真机调试&#x2F;调用公共接口或云函数或服务器域名配置的自定义接口、<strong>后端开发</strong>可使用一站式服务的云开发模式 (云函数&#x2F;云存储&#x2F;云数据库) 或自行搭建部署服务器。</li>
<li><strong>技术方案</strong>：原生基础库存在组件化开发困难和 npm 模块无法使用等问题，原生方案通过开发者工具新建项目，不跨端项目可使用框架 wepy，跨平台项目开发可用框架 uniApp&#x2F;Taro。发布和调试时必须使用开发者工具，但编辑代码时可自行选择编辑器并安装辅助插件 minapp。</li>
</ul>
  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@title</span> 项目目录</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> json 文件注意事项：不可添加任何注释，否则就会报错</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> npm 包：不支持 NodeJS / C++ 插件 / 浏览器对象</span></span><br><span class="line"><span class="comment"> * </span></span><br><span class="line"><span class="comment"> * <span class="doctag">@title</span> 分包优化</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 一个主包：启动时下载，包含启动 / TabBar 页面、公共资源。</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 多个分包：按需加载当前页面的分包，包含包内页面、私有资源。</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 独立分包：不依赖主包而独立运行、常用于按需加载的功能页面。</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 体积限制：所有分包不超过 16M、主包/单个分包不能超过 2M。</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 结构配置：app.json/subpackages、其他目录会打包到主包。</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 引用原则：分包可引用主包的公共资源、分包资源只能自己引用。</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 生效判断：开发者工具、详情、基本信息、本地代码、查看分包。</span></span><br><span class="line"><span class="comment">**/</span></span><br><span class="line">miniprogram</span><br><span class="line">  ├─ constants                 <span class="comment">// 项目常量</span></span><br><span class="line">  ├─ services                  <span class="comment">// 接口目录</span></span><br><span class="line">  ├─ image                     <span class="comment">// 图片资源</span></span><br><span class="line">  ├─ utils                     <span class="comment">// 工具函数</span></span><br><span class="line">  |    └─ util.<span class="property">js</span></span><br><span class="line">  ├─ miniprogram_npm           <span class="comment">// npm 依赖包：新版本已支持 npm</span></span><br><span class="line">  ├─ components                <span class="comment">// 自定义组件：文件组成和页面相同</span></span><br><span class="line">  |    ├─ menu          </span><br><span class="line">  |    └─ collapse</span><br><span class="line">  ├─ pages                     <span class="comment">// 页面目录：需要声明到 app.json</span></span><br><span class="line">  |    ├─ index                <span class="comment">// 文件类型：脚本、配置、模版、样式</span></span><br><span class="line">  |    |   ├─ index.<span class="property">js</span></span><br><span class="line">  |    |   ├─ index.<span class="property">json</span></span><br><span class="line">  |    |   ├─ index.<span class="property">wxml</span></span><br><span class="line">  |    |   └─ index.<span class="property">wxss</span></span><br><span class="line">  |    └─ logs</span><br><span class="line">  ├─ packageA                   </span><br><span class="line">  |    └─ pages                <span class="comment">// 第一个分包的所有页面 </span></span><br><span class="line">  |        ├─ cat</span><br><span class="line">  |        └─ dog</span><br><span class="line">  ├─ packageB</span><br><span class="line">  |    └─ pages                <span class="comment">// 第二个分包的所有页面 </span></span><br><span class="line">  |        ├─ apple</span><br><span class="line">  |        └─ banner</span><br><span class="line">  | </span><br><span class="line">  ├─ app.<span class="property">js</span>                    <span class="comment">// 入口文件：注册实例、全局变量、生命周期</span></span><br><span class="line">  ├─ app.<span class="property">wxss</span>                  <span class="comment">// 公共样式：css 修改语法、全局基本样式</span></span><br><span class="line">  ├─ app.<span class="property">json</span>                  <span class="comment">// 全局配置：页面路径、窗口外观、导航栏</span></span><br><span class="line">  ├─ sitemap.<span class="property">json</span>              <span class="comment">// 页面是否允许微信索引：用户搜索时展示</span></span><br><span class="line">  └─ project.<span class="property">config</span>.<span class="property">json</span>       <span class="comment">// 项目配置：编译相关、项目名称、APPID</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// app.json：配置分包结构和预加载、注意同一个分包的页面共同的预下载限制 2M</span></span><br><span class="line">&#123;</span><br><span class="line">    <span class="string">&quot;pages&quot;</span>: [<span class="string">&quot;pages/index&quot;</span>, <span class="string">&quot;pages/logs&quot;</span>]</span><br><span class="line">    <span class="string">&quot;subpackages&quot;</span>: [</span><br><span class="line">        &#123;</span><br><span class="line">            <span class="string">&quot;root&quot;</span>: <span class="string">&quot;packageA&quot;</span>,</span><br><span class="line">            <span class="string">&quot;pages&quot;</span>: [<span class="string">&quot;pages/cat/cat&quot;</span>, <span class="string">&quot;pages/dog/dog&quot;</span>]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            <span class="string">&quot;root&quot;</span>: <span class="string">&quot;packageB&quot;</span>,</span><br><span class="line">            <span class="string">&quot;independent&quot;</span>: <span class="literal">true</span>,     <span class="comment">// 声明为独立分包</span></span><br><span class="line">            <span class="string">&quot;pages&quot;</span>: [<span class="string">&quot;pages/apple/apple&quot;</span>, <span class="string">&quot;pages/banner/banner&quot;</span>]</span><br><span class="line">        &#125;</span><br><span class="line">    ],</span><br><span class="line">    <span class="string">&quot;preloadRule&quot;</span>: &#123;      <span class="comment">// 进入某页面需要预加载的分包：网络条件、加载包</span></span><br><span class="line">        <span class="string">&quot;pages/index&quot;</span>: &#123;</span><br><span class="line">            <span class="string">&quot;network&quot;</span>: <span class="string">&quot;all / wifi&quot;</span>,</span><br><span class="line">            <span class="string">&quot;packages&quot;</span>: [<span class="string">&quot;packageB&quot;</span>]</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> MINA：小程序官方框架，采用 WXML/WXSS 等语法。 </span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> kbone：腾讯参考 Vue 语法，只支持小程序和 Web。</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> uniApp：DCloud 参考 Vue，开发者只需使用 Vue 而不依赖原生工程师。</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> Taro：京东参考 React，需搭建 IOS/Andriod 环境并使用 React/Vue。</span></span><br><span class="line"><span class="comment">**/</span></span><br><span class="line"><span class="comment">// kbone-cli 开发小程序/Web，也可以将现有模板下载后改造</span></span><br><span class="line">npm install -g kbone-cli</span><br><span class="line">kbone init miniprogram  </span><br><span class="line">npm run mp/web</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// uniApp 两种创建方式：通过命令行、配合编辑器 HBuildx</span></span><br><span class="line"><span class="number">1</span>、<span class="title class_">HbuilderX</span> 编辑器安装、文件--新建--项目、工具--插件安装--安装vue3编译器</span><br><span class="line"><span class="number">2</span>、配置 manifest.<span class="property">json</span>、配置微信小程序 <span class="title class_">AppID</span>、小程序运行配置开发者工具路径</span><br><span class="line"><span class="number">3</span>、微信开发者工具点击安全开启服务端口、uniApp 项目运行后编译为小程序代码展示</span><br><span class="line"></span><br><span class="line">npx degit dcloudio/uni-preset-vue#vite-ts 项目名称   <span class="comment">// vue3 + ts</span></span><br><span class="line">pnpm install                 <span class="comment">// 安装项目依赖</span></span><br><span class="line">pnpm <span class="attr">dev</span>:mp-weixin           <span class="comment">// 编译成小程序代码：VSCode 通过依赖编译</span></span><br><span class="line">导入开发者工具、manifest.<span class="property">json</span> 为真机预览添加 <span class="title class_">AppID</span></span><br><span class="line"><span class="title class_">VSCode</span> 安装插件：uni-create-view、uni-helper uni-app、uniapp 小程序</span><br><span class="line">pnpm i -D @types/wechat-miniprogram @uni-helper/uni-app-types</span><br><span class="line">tsconfig.<span class="property">json</span>               <span class="comment">// 配置 TS 类型校验</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// settings.json：添加文件配置解决 pages/manifest.json 文件注释报错</span></span><br><span class="line"><span class="string">&quot;files.associations&quot;</span>: &#123;</span><br><span class="line">    <span class="string">&quot;pages.json&quot;</span>: <span class="string">&quot;jsonc&quot;</span>,</span><br><span class="line">    <span class="string">&quot;manifest.json&quot;</span>: <span class="string">&quot;jsonc&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// Git 管理项目：新建文件 .gitignore、执行命令</span></span><br><span class="line">git init</span><br><span class="line">git add .</span><br><span class="line">git commit -m <span class="string">&quot;init project&quot;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@title</span> Taro 搭建项目</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 设计思想：根据 Nerv 语法编写一份源代码、编译工具生成各平台代码</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 主要特点：遵循 React 语法并集成了兼容 React 生态的 Nerv 框架</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 项目配置：project.config/swan/tt.json 微信/百度/字节小程序</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> css 工具：config/index.js -- plugins 添加 Sass 等编译插件</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 路由功能：默认自带而不用配置，页面之间通过接口跳转到 pages 路径</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 尺寸单位：建议使用 px %、编译为小程序/H5 代码时会转为 rpx/rem</span></span><br><span class="line"><span class="comment"> * </span></span><br><span class="line"><span class="comment"> * <span class="doctag">@title</span> 跨平台开发方案</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> process.env.TARO_ENV：内置环境变量来判断类型如 weapp/swan</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 统一接口的多端文件：命名为 文件名.端类型、引用无后缀的默认文件</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 实例：test.js (引用组件/方法)、test.weapp.j、test.h5.js</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@title</span> 跨平台组件库：结合 jsx 语法规范针对各平台定制</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 实例：H5 <span class="doctag">@tarojs</span>/components、RN：<span class="doctag">@tarojs</span>/components-rn</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 规范：首字母大写与驼峰式命名方式、组件的事件传递都要以 on 开头</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 引用：import &#123; View, Text &#125; from &#x27;<span class="doctag">@tarojs</span>/components&#x27;</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@title</span> <span class="variable">Taro</span>-UI 组件库：cnpm i taro-ui、yarn add taro-ui</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 全局样式引入：<span class="doctag">@import</span> &quot;~taro-ui/dist/style/index.scss&quot;; </span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 组件引用：import &#123; AtIcon, AtButton &#125; from &#x27;taro-ui&#x27;;</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 自定义主题：SCSS 变量、全局样式类、customStyle 属性(不推荐)</span></span><br><span class="line"><span class="comment">**/</span></span><br><span class="line">yarn <span class="variable language_">global</span> add @tarojs/cli      <span class="comment">// npm install -g 经常安装失败</span></span><br><span class="line">taro init myTaro                 <span class="comment">// 选择框架和模版后就会初始化目录</span></span><br><span class="line">npm run <span class="attr">dev</span>:h5                   <span class="comment">// H5 模式预览：公众号和浏览器等</span></span><br><span class="line">yarn <span class="attr">build</span>:weapp                 <span class="comment">// 生成小程序代码：工具引入后预览</span></span><br><span class="line"></span><br><span class="line">myTaro</span><br><span class="line">  ├─ index.<span class="property">html</span></span><br><span class="line">  ├─ config                     <span class="comment">// 环境配置</span></span><br><span class="line">  ├─ dist                       <span class="comment">// 编译目录</span></span><br><span class="line">  ├─ src                        <span class="comment">// 项目源码</span></span><br><span class="line">  |   ├─ app.<span class="property">ts</span>                 <span class="comment">// 入口文件</span></span><br><span class="line">  |   ├─ app.<span class="property">scss</span>               <span class="comment">// 公共样式</span></span><br><span class="line">  |   └─ app.<span class="property">config</span>.<span class="property">ts</span>          <span class="comment">// 全局配置：路径、窗口、tab 标签等</span></span><br><span class="line">  |   ├─ pages</span><br><span class="line">  |   |   ├─ list</span><br><span class="line">  |   |   └─ index</span><br><span class="line">  |   |       ├─ index.<span class="property">tsx</span></span><br><span class="line">  |   |       ├─ index.<span class="property">scss</span></span><br><span class="line">  |   |       └─ index.<span class="property">config</span>.<span class="property">ts</span>      <span class="comment">// 页面配置：导航栏、背景等</span></span><br><span class="line">  ├─ project.<span class="property">config</span>.<span class="property">json</span>              <span class="comment">// 微信小程序配置：默认生成</span></span><br><span class="line">  ├─ project.<span class="property">swan</span>.<span class="property">json</span>                <span class="comment">// 百度小程序配置：兼容平台</span></span><br><span class="line">  ├─ project.<span class="property">quickapp</span>.<span class="property">json</span>            <span class="comment">// 快应用配置</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Taro-UI 组件库样式：app.js 全局、app.scss 全局、page.scss 按需</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;taro-ui/dist/style/index.scss&#x27;</span>;</span><br><span class="line">@<span class="keyword">import</span> <span class="string">&quot;~taro-ui/dist/style/index.scss&quot;</span>;</span><br><span class="line">@<span class="keyword">import</span> <span class="string">&quot;~taro-ui/dist/style/components/button.scss&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> &#123; <span class="title class_">AtButton</span> &#125; <span class="keyword">from</span> <span class="string">&#x27;taro-ui&#x27;</span>;    <span class="comment">// 组件按需引用</span></span><br><span class="line">$color-<span class="attr">brand</span>: #<span class="number">6190E8</span>;       <span class="comment">// app.scss 自定义主题变量</span></span><br></pre></td></tr></table></figure>



<h1 id="二、视图层"><a href="#二、视图层" class="headerlink" title="二、视图层"></a>二、视图层</h1><h2 id="WXML-模版"><a href="#WXML-模版" class="headerlink" title="WXML 模版"></a>WXML 模版</h2>  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br></pre></td><td class="code"><pre><span class="line">====================== <span class="number">1</span>、数据渲染 =======================</span><br><span class="line"><span class="comment">// 数据绑定</span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">view</span>&gt;</span> &#123;&#123;name&#125;&#125; + a <span class="tag">&lt;/<span class="name">view</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">view</span> <span class="attr">id</span>=<span class="string">&quot;item-&#123;&#123;id&#125;&#125;&quot;</span>&gt;</span> <span class="tag">&lt;/<span class="name">view</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">view</span> <span class="attr">hidden</span>=<span class="string">&quot;&#123;&#123;status ? true : false&#125;&#125;&quot;</span>&gt;</span> Hidden <span class="tag">&lt;/<span class="name">view</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 条件渲染</span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">view</span> <span class="attr">wx:if</span>=<span class="string">&quot;&#123;&#123;num &gt; 5&#125;&#125;&quot;</span>&gt;</span> A <span class="tag">&lt;/<span class="name">view</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">view</span> <span class="attr">wx:elif</span>=<span class="string">&quot;&#123;&#123;num &gt; 2&#125;&#125;&quot;</span>&gt;</span> B <span class="tag">&lt;/<span class="name">view</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">view</span> <span class="attr">wx:else</span>&gt;</span> C <span class="tag">&lt;/<span class="name">view</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 列表渲染：一维数组默认 index item、wx:for-item 用于给列表赋别名</span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">view</span> <span class="attr">wx:for</span>=<span class="string">&quot;&#123;&#123;arr&#125;&#125;&quot;</span> <span class="attr">wx:key</span>=<span class="string">&#x27;&#123;&#123;index&#125;&#125;&#x27;</span> <span class="attr">id</span>=<span class="string">&quot;&#123;&#123;index&#125;&#125;&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">text</span>&gt;</span>&#123;&#123;item.title&#125;&#125;<span class="tag">&lt;/<span class="name">text</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">view</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">view</span> <span class="attr">wx:for</span>=<span class="string">&quot;&#123;&#123;pList&#125;&#125;&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">　　 <span class="tag">&lt;<span class="name">view</span> <span class="attr">wx:for</span>=<span class="string">&quot;&#123;&#123;item.s&#125;&#125;&quot;</span> <span class="attr">wx:for-item</span>=<span class="string">&quot;sub&quot;</span> <span class="attr">wx:for-index</span>=<span class="string">&quot;x&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        &#123;&#123;items.name&#125;&#125;：&#123;&#123;item.account&#125;&#125;</span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">view</span>&gt;</span> </span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">view</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="title class_">Page</span>(&#123;</span><br><span class="line">    <span class="attr">data</span>: &#123; <span class="attr">name</span>: <span class="string">&#x27;Mike&#x27;</span>, <span class="attr">id</span>: <span class="number">0</span>, <span class="attr">status</span>: <span class="literal">false</span>, <span class="attr">arr</span>: [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>] &#125;,</span><br><span class="line">    <span class="attr">onLoad</span>: <span class="keyword">function</span>(<span class="params">option</span>)&#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="title function_">setData</span>(&#123; <span class="attr">name</span>: <span class="string">&#x27;Mike&#x27;</span> &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">======== <span class="number">2</span>、模板使用：name 模版名称、is 引用模版、data 传入数据 =======</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">template</span> <span class="attr">name</span>=<span class="string">&quot;msgItem&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">view</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">text</span>&gt;</span> &#123;&#123;index&#125;&#125;: &#123;&#123;msg&#125;&#125; <span class="tag">&lt;/<span class="name">text</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">text</span>&gt;</span> Time: &#123;&#123;time&#125;&#125; <span class="tag">&lt;/<span class="name">text</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">view</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">template</span> <span class="attr">is</span>=<span class="string">&quot;msgItem&quot;</span> <span class="attr">data</span>=<span class="string">&quot;&#123;&#123;...item&#125;&#125;&quot;</span> /&gt;</span></span></span><br><span class="line"><span class="title class_">Page</span>(&#123;</span><br><span class="line">    <span class="attr">data</span>: &#123;</span><br><span class="line">        <span class="attr">item</span>: &#123; <span class="attr">index</span>: <span class="number">0</span>, <span class="attr">msg</span>: <span class="string">&#x27;imsg&#x27;</span>, <span class="attr">time</span>: <span class="string">&#x27;2023-09-15&#x27;</span> &#125; </span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">&lt;template name=<span class="string">&quot;content-item&quot;</span>&gt;</span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">block</span> <span class="attr">wx:if</span>=<span class="string">&quot;&#123;&#123;content.type == &#x27;TEXT&#x27;&#125;&#125;&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">view</span> <span class="attr">style</span>=<span class="string">&quot;margin-top: 30rpx&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">text</span> <span class="attr">wx:if</span>=<span class="string">&quot;&#123;&#123;content.type == &#x27;TEXT&#x27;&#125;&#125;&quot;</span> <span class="attr">class</span>=<span class="string">&quot;text&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            &#123;&#123;content.content&#125;&#125;<span class="tag">&lt;/<span class="name">text</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">view</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">block</span>&gt;</span></span></span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">block</span> <span class="attr">wx:if</span>=<span class="string">&quot;&#123;&#123;content.type == &#x27;IMAGE&#x27;&#125;&#125;&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">image</span> </span></span></span><br><span class="line"><span class="tag"><span class="language-xml">            <span class="attr">class</span>=<span class="string">&quot;media&quot;</span> </span></span></span><br><span class="line"><span class="tag"><span class="language-xml">            <span class="attr">mode</span>=<span class="string">&quot;aspectFill&quot;</span> </span></span></span><br><span class="line"><span class="tag"><span class="language-xml">            <span class="attr">src</span>=<span class="string">&quot;&#123;&#123;content.content&#125;&#125;&quot;</span> </span></span></span><br><span class="line"><span class="tag"><span class="language-xml">            <span class="attr">bindtap</span>=<span class="string">&quot;enterPreviewMode&quot;</span> </span></span></span><br><span class="line"><span class="tag"><span class="language-xml">            <span class="attr">data-src</span>=<span class="string">&quot;&#123;&#123;content.content&#125;&#125;&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">image</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">view</span> <span class="attr">style</span>=<span class="string">&quot;margin: 10rpx&quot;</span>&gt;</span>&#123;&#123;content.description&#125;&#125;<span class="tag">&lt;/<span class="name">view</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">block</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">view</span> <span class="attr">wx:for</span>=<span class="string">&quot;&#123;&#123;diy.list&#125;&#125;&quot;</span> <span class="attr">wx:for-item</span>=<span class="string">&quot;content&quot;</span> <span class="attr">class</span>=<span class="string">&quot;content&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">template</span> <span class="attr">is</span>=<span class="string">&quot;content-item&quot;</span> <span class="attr">data</span>=<span class="string">&quot;&#123;&#123;content&#125;&#125;&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">view</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 页面引用：import 不能多重引用模版、include 可多重引用</span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">template</span> <span class="attr">name</span>=<span class="string">&quot;test&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">view</span>&gt;</span>&#123;&#123;text&#125;&#125;<span class="tag">&lt;/<span class="name">view</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">import</span> <span class="attr">src</span>=<span class="string">&quot;test.wxml&quot;</span> /&gt;</span></span> </span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">template</span> <span class="attr">is</span>=<span class="string">&quot;test&quot;</span> <span class="attr">data</span>=<span class="string">&quot;&#123;&#123;text&#125;&#125;&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">include</span> <span class="attr">src</span>=<span class="string">&quot;header.wxml&quot;</span>/&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">view</span>&gt;</span> body <span class="tag">&lt;/<span class="name">view</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">include</span> <span class="attr">src</span>=<span class="string">&quot;footer.wxml&quot;</span>/&gt;</span></span></span><br><span class="line"> </span><br><span class="line"></span><br><span class="line">======================== <span class="number">3</span>、事件机制 ===========================</span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@title</span> 事件机制</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 常用事件：touchstart/move/end/cancel、longtap、tap</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 事件绑定：bind/catch + 事件，区别是 catch 会阻止冒泡</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 互斥事件绑定：mut-bind 绑定和冒泡节点的事件只会触发一个</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 触摸类事件的捕获阶段：capture-bind/catch 后者中断捕获 </span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 数据传递：data-prop、dataset，类似于 html 自定义属性</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 数据获取和更新：this.data[prop]、this.setData(&#123; &#125;)</span></span><br><span class="line"><span class="comment"> * </span></span><br><span class="line"><span class="comment"> * <span class="doctag">@title</span> 事件对象：TouchEvent、CustomEvent 继承自 BaseEvent</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> BaseEvent：type、timeStamp、target、currentTarget</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> TouchEvent 触摸：touches、changedTouches</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> CustomEvent 自定义：detail 自定义事件的数据</span></span><br><span class="line"><span class="comment">**/</span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">view</span> <span class="attr">class</span>=<span class="string">&quot;list&quot;</span> &gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">view</span> <span class="attr">class</span>=<span class="string">&#x27;box&#x27;</span> </span></span></span><br><span class="line"><span class="tag"><span class="language-xml">        <span class="attr">wx:for</span>=<span class="string">&#x27;&#123;&#123;list&#125;&#125;&#x27;</span> </span></span></span><br><span class="line"><span class="tag"><span class="language-xml">        <span class="attr">wx:key</span>=<span class="string">&#x27;&#123;&#123;index&#125;&#125;&#x27;</span> </span></span></span><br><span class="line"><span class="tag"><span class="language-xml">        <span class="attr">data-id</span>=<span class="string">&#x27;&#123;&#123;item.id&#125;&#125;&#x27;</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">        <span class="attr">data-list</span>=<span class="string">&#x27;item.list&#x27;</span> </span></span></span><br><span class="line"><span class="tag"><span class="language-xml">        <span class="attr">bindtap</span>=<span class="string">&#x27;onClick&#x27;</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">        <span class="attr">mut-bind:tap</span>=<span class="string">&quot;onTapMut2&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">text</span> <span class="attr">catchtap</span>=<span class="string">&quot;handleTap&quot;</span>&gt;</span>&#123;&#123;item.title&#125;&#125;<span class="tag">&lt;/<span class="name">text</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">image</span> <span class="attr">mut-bind:tap</span>=<span class="string">&quot;onTapMut&quot;</span> <span class="attr">src</span>=<span class="string">&#x27;&#123;&#123;item.img&#125;&#125;&#x27;</span>&gt;</span><span class="tag">&lt;/<span class="name">image</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">view</span>&gt;</span> </span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">view</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">view</span> <span class="attr">bind:touchstart</span>=<span class="string">&quot;onStart&quot;</span> <span class="attr">capture-bind:touchstart</span>=<span class="string">&quot;onStart2&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    outer</span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">view</span> <span class="attr">bind:touchstart</span>=<span class="string">&quot;start3&quot;</span> <span class="attr">capture-bind:touchstart</span>=<span class="string">&quot;start4&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      inner 调用顺序：2、4、3、1，capture-bind 第一个改为 -catch 只触发 2</span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">view</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">view</span>&gt;</span></span></span><br><span class="line"><span class="title class_">Page</span>(&#123;</span><br><span class="line">    <span class="attr">onClick</span>: <span class="keyword">function</span>(<span class="params">e</span>) &#123;</span><br><span class="line">        <span class="keyword">let</span> &#123;id, list&#125; = e.<span class="property">currentTarget</span>.<span class="property">dataset</span>  <span class="comment">// 字符、数组</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>


<h2 id="WXSS-样式"><a href="#WXSS-样式" class="headerlink" title="WXSS 样式"></a>WXSS 样式</h2>  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 选择器：class、id、element、::before、::after </span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 样式导入：<span class="doctag">@import</span> + 样式表的相对路径，; 表示结束</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 原生不支持语法：less/sass、级联选择器、多层选择器</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> <span class="variable">background</span>-image：本地不可、支持 base64 或网络</span></span><br><span class="line"><span class="comment">**/</span></span><br><span class="line">&lt;view&gt;</span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">view</span> <span class="attr">style</span>=<span class="string">&quot;color: red&quot;</span>&gt;</span>红色<span class="tag">&lt;/<span class="name">view</span>&gt;</span></span></span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">view</span> <span class="attr">style</span>=<span class="string">&quot;color: &#123;&#123; color &#125;&#125;;&quot;</span>&gt;</span>动态<span class="tag">&lt;/<span class="name">view</span>&gt;</span></span></span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">view</span> <span class="attr">style</span>=<span class="string">&quot;color: &#123;&#123;flag ? color : &#x27;&#x27; &#125;&#125;;&quot;</span>&gt;</span>动态<span class="tag">&lt;/<span class="name">view</span>&gt;</span></span></span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">view</span> <span class="attr">class</span>=<span class="string">&quot;red&quot;</span>&gt;</span>红色<span class="tag">&lt;/<span class="name">view</span>&gt;</span></span></span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">view</span> <span class="attr">class</span>=<span class="string">&quot;&#123;&#123;flag ? color : &#x27;&#x27;&#125;&#125; &#x27;bg&#x27;&quot;</span>&gt;</span>动态<span class="tag">&lt;/<span class="name">view</span>&gt;</span></span></span><br><span class="line">&lt;/view&gt;</span><br><span class="line"></span><br><span class="line"><span class="title class_">Page</span>(&#123;</span><br><span class="line">    <span class="attr">data</span>: &#123; <span class="attr">color</span>: <span class="string">&quot;red&quot;</span>, <span class="attr">flag</span>: <span class="literal">true</span> &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">@<span class="keyword">import</span><span class="string">&quot;../../style/common.wxss&quot;</span>;</span><br><span class="line">view&#123;</span><br><span class="line">    <span class="attr">width</span>: 750rpx;</span><br><span class="line">    <span class="attr">height</span>: 750rpx;</span><br><span class="line">    font-<span class="attr">size</span>: 70rpx;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h2 id="WXS-模块"><a href="#WXS-模块" class="headerlink" title="WXS 模块"></a>WXS 模块</h2><blockquote>
<p>Weixin Script 脚本的简称，用于扩展 WXML 功能而可以直接调用 JS，使用时一个 .wxs 文件和 wxs 标签都是一个独立模块，模块第一次被引用时会自动初始化为单例对象并在以后多次引用的是同一个对象，模块定义后如果一直没被引用则不会被解析运行。</p>
</blockquote>
  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@title</span> 主要特点</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 数据类型：num、str、bool、obj、fn、arr、date、regexp</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 不支持扩展语法 ES6+：比如常用的 let、const、箭头函数等</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> CommonJS 规范：module、require()、module.exports</span></span><br><span class="line"><span class="comment"> * </span></span><br><span class="line"><span class="comment"> * <span class="doctag">@title</span> 基础使用</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> wxml 直接使用标签：&lt;wxs module=&quot;名称&quot; src=&quot;&quot;&gt;&lt;/wxs&gt;</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> wxml 文件引用 .wxs 文件：&lt;wxs src=&quot;相对路径&quot;&gt;&lt;/wxs&gt;</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> wxs 文件引用其它 .wxs 文件：require(&quot;./tools.wxs&quot;)</span></span><br><span class="line"><span class="comment">**/</span></span><br><span class="line">&lt;wxs moudle=<span class="string">&quot;tools&quot;</span>&gt;</span><br><span class="line">    <span class="keyword">var</span> a = <span class="built_in">require</span>(<span class="string">&quot;./tools.wxs&quot;</span>)</span><br><span class="line">    moudle.<span class="property">exports</span> = &#123;</span><br><span class="line">        <span class="attr">msg</span>: <span class="string">&quot;hello&quot;</span>,</span><br><span class="line">        <span class="attr">slice</span>: <span class="keyword">function</span>(<span class="params">str, a, b</span>)&#123;</span><br><span class="line">            <span class="keyword">return</span> str.<span class="title function_">slice</span>(a, b)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&lt;/wxs&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">view</span>&gt;</span>&#123;&#123;tools.slice(&quot;123456&quot;, 0, 5)&#125;&#125;<span class="tag">&lt;/<span class="name">view</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">wxs</span> <span class="attr">src</span>=<span class="string">&quot;../../utils/string.wxs&quot;</span> <span class="attr">module</span>=<span class="string">&quot;tools&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">wxs</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">view</span>&gt;</span>&#123;&#123;tools.msg&#125;&#125;<span class="tag">&lt;/<span class="name">view</span>&gt;</span></span></span><br></pre></td></tr></table></figure>


<h1 id="三、逻辑层"><a href="#三、逻辑层" class="headerlink" title="三、逻辑层"></a>三、逻辑层</h1><blockquote>
<p>通过 JS 引擎为小程序提供运行环境和功能接口，并将处理后的数据发送给视图层和接受视图层的事件反馈。开发者编写的代码最终将会打包为 JS 文件并在小程序启动时运行到微信销毁，由于行为类似 ServiceWorker 而称为 AppService。</p>
</blockquote>
<h2 id="程序注册"><a href="#程序注册" class="headerlink" title="程序注册"></a>程序注册</h2>  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// app.js：注册全部页面共享的唯一程序实例，应用生命周期函数如下。</span></span><br><span class="line"><span class="title class_">App</span>(&#123;</span><br><span class="line">    onLaunch (options) &#123; &#125;,      <span class="comment">// 初始化完成时触发一次</span></span><br><span class="line">    onShow (options) &#123; &#125;,        <span class="comment">// 启动时或从后台进入前台显示时</span></span><br><span class="line">    onHide () &#123; &#125;,               <span class="comment">// 从前台进入后台时</span></span><br><span class="line">    onError (msg) &#123; &#125;,           <span class="comment">// 脚本错误或 API 调用报错时</span></span><br><span class="line">    onPageNotFound (res) &#123; &#125;,    <span class="comment">// 要打开的页面不存在时</span></span><br><span class="line"></span><br><span class="line">    onUnhandledRejection () &#123;&#125;,  <span class="comment">// 未处理的 Promise 拒绝时</span></span><br><span class="line">    onThemeChange () &#123;&#125;,         <span class="comment">// 小程序切换主题时</span></span><br><span class="line">    <span class="attr">globalData</span>: &#123; <span class="attr">user</span>: <span class="literal">null</span> &#125;   <span class="comment">// 自定义的全局变量</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>


<h2 id="页面注册"><a href="#页面注册" class="headerlink" title="页面注册"></a>页面注册</h2>  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// app.json：开发者工具在新增 pages 路径时会自动创建页面文件</span></span><br><span class="line">&#123;</span><br><span class="line">    <span class="string">&quot;pages&quot;</span>:[</span><br><span class="line">        <span class="string">&quot;pages/index/index&quot;</span>,</span><br><span class="line">        <span class="string">&quot;pages/logs/logs&quot;</span></span><br><span class="line">    ],</span><br><span class="line">    <span class="string">&quot;window&quot;</span>:&#123;</span><br><span class="line">        <span class="string">&quot;backgroundTextStyle&quot;</span>: <span class="string">&quot;light&quot;</span>,         <span class="comment">// 加载小圆圈的颜色</span></span><br><span class="line">        <span class="string">&quot;navigationBarBackgroundColor&quot;</span>: <span class="string">&quot;#fff&quot;</span>, <span class="comment">// 导航栏背景颜色</span></span><br><span class="line">        <span class="string">&quot;navigationBarTitleText&quot;</span>: <span class="string">&quot;Weixin&quot;</span>,     <span class="comment">// 导航栏的文本内容</span></span><br><span class="line">        <span class="string">&quot;navigationBarTextStyle&quot;</span>: <span class="string">&quot;black/white&quot;</span> <span class="comment">// 导航栏标题颜色 </span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="string">&quot;style&quot;</span>: <span class="string">&quot;v2&quot;</span>,                              <span class="comment">// 组件样式版本</span></span><br><span class="line">    <span class="string">&quot;sitemapLocation&quot;</span>: <span class="string">&quot;sitemap.json&quot;</span>           <span class="comment">// 指明位置</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// pages/index/index.js：初始数据加载、生命周期回调、事件处理函数等。</span></span><br><span class="line"><span class="keyword">var</span> myBehavior = <span class="built_in">require</span>(<span class="string">&#x27;./my-behavior.js&#x27;</span>)</span><br><span class="line"><span class="title class_">Page</span>(&#123;</span><br><span class="line">    <span class="attr">onLoad</span>: <span class="keyword">function</span>(<span class="params">options</span>) &#123; &#125;,        <span class="comment">// 页面加载时</span></span><br><span class="line">    <span class="attr">onShow</span>: <span class="keyword">function</span>(<span class="params"></span>) &#123; &#125;,               <span class="comment">// 显示/切入前台时</span></span><br><span class="line">    <span class="attr">onReady</span>: <span class="keyword">function</span>(<span class="params"></span>) &#123; &#125;,              <span class="comment">// 首次渲染完成时</span></span><br><span class="line">    <span class="attr">onHide</span>: <span class="keyword">function</span>(<span class="params"></span>) &#123; &#125;,               <span class="comment">// 隐藏/切入后台时</span></span><br><span class="line">    <span class="attr">onUnload</span>: <span class="keyword">function</span>(<span class="params"></span>) &#123; &#125;,             <span class="comment">// 页面卸载时</span></span><br><span class="line"></span><br><span class="line">    <span class="attr">onPullDownRefresh</span>: <span class="keyword">function</span>(<span class="params"></span>) &#123; &#125;,    <span class="comment">// 下拉刷新时</span></span><br><span class="line">    <span class="attr">onPageScroll</span>: <span class="keyword">function</span>(<span class="params"></span>) &#123; &#125;,         <span class="comment">// 页面滚动时</span></span><br><span class="line">    <span class="attr">onReachBottom</span>: <span class="keyword">function</span>(<span class="params"></span>) &#123; &#125;,        <span class="comment">// 页面触底时</span></span><br><span class="line">    <span class="attr">onResize</span>: <span class="keyword">function</span>(<span class="params"></span>) &#123; &#125;,             <span class="comment">// 页面尺寸变化时</span></span><br><span class="line">    <span class="attr">onShareAppMessage</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123; &#125;,   <span class="comment">// 页面被用户分享时</span></span><br><span class="line">    <span class="title function_">onTabItemTap</span>(<span class="params">item</span>) &#123; &#125;,               <span class="comment">// tab 点击时</span></span><br><span class="line"></span><br><span class="line">    <span class="attr">data</span>: &#123; <span class="attr">text</span>: <span class="string">&quot;首页文字&quot;</span> &#125;,   <span class="comment">// 自定义的数据</span></span><br><span class="line">    <span class="attr">onViewTap</span>: <span class="keyword">function</span>(<span class="params"></span>) &#123; &#125;,   <span class="comment">// 事件响应函数</span></span><br><span class="line">    <span class="attr">behaviors</span>: [myBehavior],     <span class="comment">// 共享的数据、生命周期和方法</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// my-behavior.js</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="title class_">Behavior</span>(&#123;</span><br><span class="line">    <span class="attr">data</span>: &#123; <span class="attr">sharedText</span>: <span class="string">&#x27;&#x27;</span> &#125;,   <span class="comment">// 内部数据</span></span><br><span class="line">    <span class="attr">properties</span>: &#123;&#125;,             <span class="comment">// 属性名到属性的映射表</span></span><br><span class="line">    <span class="attr">methods</span>: &#123;&#125;,                <span class="comment">// 自定义方法和响应事件</span></span><br><span class="line">    <span class="attr">created</span>: &#123;&#125;,                <span class="comment">// 组件的周期函数</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>


<h2 id="官方-API"><a href="#官方-API" class="headerlink" title="官方 API"></a>官方 API</h2>  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@title</span> API 分类</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 事件监听：on 开头比如 wx.onWindowResize，用来监听某事件的触发。</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 同步：Sync 结尾比如 wx.setStorageSync，返回值直接作为执行结果。</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 异步：wx.request 等需要通过 success/fail/complete 来接收结果。</span></span><br><span class="line"><span class="comment"> * </span></span><br><span class="line"><span class="comment"> * <span class="doctag">@title</span> API 常用：异步接口在尾部添加 Sync</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 网络请求：request、uploadFile、downloadFile、connectSocket</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 数据缓存：getStorage、setStorage、removeStorage、clearStorage</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 页面跳转：navigateTo、navigateBack、redirectTo、reLaunch、switchTab</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 页面交互：showToast/Modal/ActionSheet/Loading、hideToast/Loading</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 位置：getLocation、chooseLocation、openLocation、createMapContext</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 设备：getSystemInfo、getNetworkType、getClipboardData、scanCode</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 媒体：chooseImage、chooseVideo、previewImage、startRecord</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 其它：login、getUserInfo/Profile、requestPayment、openCard</span></span><br><span class="line"><span class="comment">**/</span></span><br></pre></td></tr></table></figure>


<h2 id="路由机制"><a href="#路由机制" class="headerlink" title="路由机制"></a>路由机制</h2><blockquote>
<p>接口编程式导航或组件声明式导航：<code>wx.navigateTo / redirectTo / navigateBack / switchTab (切换导航页) / reLaunch、&lt;navigator open-type=&quot;navigateTo&quot; url=&quot;pages/logs/index&quot;&gt;</code>。页面栈以先进后出的形式维护页面之间的关系，redirectTo 不会增加页面栈大小，navigateTo 累加到最大值 5，navigateBack 减少到最小值 1。</p>
</blockquote>
<table>
<thead>
<tr>
<th>路由方式</th>
<th>页面栈</th>
<th>触发时机</th>
<th>前页面执行</th>
<th>新页面执行</th>
</tr>
</thead>
<tbody><tr>
<td>小程序初始化</td>
<td>新页面入栈</td>
<td>首页打开</td>
<td></td>
<td>onLoad、onShow</td>
</tr>
<tr>
<td>打开新页面</td>
<td>新页面入栈</td>
<td>navigateTo</td>
<td>onHide</td>
<td>onLoad、onShow</td>
</tr>
<tr>
<td>页面重定向</td>
<td>当前页面出栈、新页面入栈</td>
<td>redirectTo</td>
<td>onUnload</td>
<td>onLoad、onShow</td>
</tr>
<tr>
<td>页面返回</td>
<td>页面不断出栈，直到目标页</td>
<td>navigateBack</td>
<td>onUnload</td>
<td>onShow</td>
</tr>
<tr>
<td>Tab 切换</td>
<td>页面全部出栈，只留新页面</td>
<td>switchTab</td>
<td></td>
<td>分为多种情况</td>
</tr>
<tr>
<td>重新启动</td>
<td>页面全部出栈，只留新页面</td>
<td>reLaunch</td>
<td>onUnload</td>
<td>onLoad、onShow</td>
</tr>
</tbody></table>
<h2 id="数据传递"><a href="#数据传递" class="headerlink" title="数据传递"></a>数据传递</h2>  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1、路由传参：a 页面传参、b 页面接收，注意 wx.switchTab url 不能传参</span></span><br><span class="line">&lt;navigator url=<span class="string">&quot;../detail/detail?name=&#123;&#123;name&#125;&#125;&amp;id=1&quot;</span>&gt;&lt;/navigator&gt;</span><br><span class="line">wx.<span class="title function_">navigateTo</span>(&#123;</span><br><span class="line">  <span class="attr">url</span>: <span class="string">`/pages/detail/detail?id=<span class="subst">$&#123;e.currentTarget.dataset.id&#125;</span>`</span>,</span><br><span class="line">  <span class="attr">url</span>: <span class="string">&#x27;/pages/detail/detail?name=&#x27;</span> + <span class="variable language_">this</span>.<span class="property">data</span>.<span class="property">name</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="title class_">Page</span>(&#123;</span><br><span class="line">    <span class="attr">onLoad</span>: <span class="keyword">function</span>(<span class="params">option</span>)&#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="title function_">setData</span>(&#123; <span class="attr">id</span>: options.<span class="property">id</span>, <span class="attr">name</span>: options.<span class="property">name</span> &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 2、事件传参：view data-id=&#x27;&#123;&#123;id&#125;&#125;&#x27; data-list=&#x27;list&#x27; bindtap=&#x27;onClick&#x27;</span></span><br><span class="line"><span class="title class_">Page</span>(&#123;</span><br><span class="line">    <span class="attr">onClick</span>: <span class="keyword">function</span>(<span class="params">event</span>) &#123;</span><br><span class="line">        <span class="keyword">let</span> &#123;id, list&#125; = e.<span class="property">currentTarget</span>.<span class="property">dataset</span>  <span class="comment">// 字符、数组</span></span><br><span class="line">        <span class="keyword">let</span> listArray = list.<span class="title function_">split</span>(<span class="string">&quot;,&quot;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 3、全局变量：App.js 设置初始值和方法，page.js 通过实例获取数据和调用方法</span></span><br><span class="line"><span class="title class_">App</span>(&#123;</span><br><span class="line">    <span class="attr">globalData</span>:&#123;</span><br><span class="line">        <span class="attr">appid</span>: <span class="string">&#x27;1wqas2342dasaqwe232342xxx&#x27;</span>,</span><br><span class="line">        <span class="attr">secret</span>: <span class="string">&#x27;e0dassdadef2424234209bwXXX&#x27;</span>,</span><br><span class="line">        <span class="attr">openid</span>: <span class="string">&#x27;12345&#x27;</span>,</span><br><span class="line">        <span class="attr">diaryList</span>: <span class="literal">null</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="title function_">getDiaryList</span>(<span class="params">cb</span>) &#123;</span><br><span class="line">        <span class="keyword">if</span> (<span class="variable language_">this</span>.<span class="property">globalData</span>.<span class="property">diaryList</span>) &#123;</span><br><span class="line">            <span class="keyword">typeof</span> cb == <span class="string">&#x27;function&#x27;</span> &amp;&amp; <span class="title function_">cb</span>(<span class="variable language_">this</span>.<span class="property">globalData</span>.<span class="property">diaryList</span>)</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            <span class="comment">// 模拟数据 diaries.js：module.exports = &#123; &#125;</span></span><br><span class="line">            <span class="keyword">const</span> diaries = <span class="built_in">require</span>(<span class="string">&#x27;demo/diaries&#x27;</span>)</span><br><span class="line">            list.<span class="title function_">push</span>(...diaries)</span><br><span class="line">            <span class="variable language_">this</span>.<span class="property">globalData</span>.<span class="property">diaryList</span> = list</span><br><span class="line">            <span class="keyword">typeof</span> cb == <span class="string">&#x27;function&#x27;</span> &amp;&amp; <span class="title function_">cb</span>(<span class="variable language_">this</span>.<span class="property">globalData</span>.<span class="property">diaryList</span>)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="title class_">Page</span>(&#123;</span><br><span class="line">    <span class="title function_">getDiary</span>(<span class="params">params</span>)&#123;</span><br><span class="line">        <span class="keyword">const</span> appInstance = <span class="title function_">getApp</span>()</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(appInstance.<span class="property">globalData</span>)</span><br><span class="line">        appInstance.<span class="title function_">getDiaryList</span>(<span class="function"><span class="params">list</span> =&gt;</span> &#123;</span><br><span class="line">            <span class="keyword">let</span> index = params.<span class="property">id</span> || <span class="number">0</span></span><br><span class="line">            <span class="keyword">let</span> diary = list[index];</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 4、页面栈：进入时依次 index、list、detail，实现详情页直接返回首页功能</span></span><br><span class="line"><span class="title class_">Page</span>(&#123;</span><br><span class="line">    <span class="attr">data</span>: &#123; <span class="attr">tag</span>: <span class="string">&#x27;详情页&#x27;</span> &#125;,</span><br><span class="line">    backToIndex () &#123;</span><br><span class="line">        <span class="keyword">let</span> pages = <span class="title function_">getCurrentPages</span>();</span><br><span class="line">        wx.<span class="title function_">navigateBack</span>(&#123;</span><br><span class="line">            <span class="attr">delta</span>: <span class="number">2</span>,</span><br><span class="line">            <span class="title function_">success</span>(<span class="params"></span>) &#123; pages[<span class="number">0</span>].<span class="title function_">setData</span>(&#123; <span class="attr">tag</span>: <span class="variable language_">this</span>.<span class="property">data</span>.<span class="property">tag</span> &#125;) &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">        <span class="comment">// 切换后自动刷新功能</span></span><br><span class="line">        wx.<span class="title function_">switchTab</span>(&#123;</span><br><span class="line">            <span class="attr">url</span>: <span class="string">&#x27;../index/index&#x27;</span>,</span><br><span class="line">            <span class="attr">success</span>: <span class="keyword">function</span> (<span class="params">e</span>) &#123; pages[<span class="number">0</span>].<span class="title function_">onLoad</span>(); &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 5、本地同异步缓存：单个最大 1MB、所有缓存的上限 10MB</span></span><br><span class="line"><span class="title function_">set</span>(<span class="params"></span>) &#123;</span><br><span class="line">    wx.<span class="title function_">setStorageSync</span>(<span class="string">&#x27;user&#x27;</span>, <span class="string">&#x27;cck&#x27;</span>)</span><br><span class="line">    wx.<span class="title function_">setStorage</span>(&#123;</span><br><span class="line">        <span class="attr">key</span>: <span class="string">&#x27;user&#x27;</span>,</span><br><span class="line">        <span class="attr">data</span>: <span class="string">&#x27;cck&#x27;</span>,</span><br><span class="line">        <span class="attr">success</span>: <span class="function">()=&gt;</span> &#123; <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;存储成功&#x27;</span>); &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;,</span><br><span class="line"><span class="title function_">get</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="keyword">var</span> value = wx.<span class="title function_">getStorageSync</span>(<span class="string">&#x27;user&#x27;</span>)</span><br><span class="line">    wx.<span class="title function_">getStorage</span>(&#123;</span><br><span class="line">        <span class="attr">key</span>: <span class="string">&#x27;user&#x27;</span>,</span><br><span class="line">        success (res) &#123; <span class="variable language_">console</span>.<span class="title function_">log</span>(res.<span class="property">data</span>) &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;,</span><br><span class="line"><span class="title function_">remove</span>(<span class="params"></span>)&#123;</span><br><span class="line">    wx.<span class="title function_">removeStorageSync</span>(<span class="string">&#x27;user&#x27;</span>)</span><br><span class="line">    wx.<span class="title function_">removeStorage</span>(&#123;</span><br><span class="line">        <span class="attr">key</span>: <span class="string">&#x27;user&#x27;</span>,</span><br><span class="line">        success (res) &#123; <span class="variable language_">console</span>.<span class="title function_">log</span>(res.<span class="property">data</span>) &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@title</span> 6、input 搜索</span></span><br><span class="line"><span class="comment"> * bindinput：键盘输入时，event.detail = &#123;value, cursor, keyCode&#125;</span></span><br><span class="line"><span class="comment"> * bindconfirm：点击完成按钮时触发，event.detail = &#123;value: value&#125;</span></span><br><span class="line"><span class="comment"> * &lt;input auto-focus bindinput=&quot;onInput&quot; bindconfirm=&#x27;toSearch&#x27; /&gt;</span></span><br><span class="line"><span class="comment">**/</span></span><br><span class="line"><span class="title class_">Page</span>(&#123; </span><br><span class="line">    <span class="attr">data</span>: &#123; <span class="attr">inputValue</span>: <span class="string">&#x27;&#x27;</span> &#125;, </span><br><span class="line">    <span class="title function_">onInput</span>(<span class="params">e</span>) &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="title function_">setData</span>(&#123; <span class="attr">inputValue</span>: e.<span class="property">detail</span>.<span class="property">value</span> &#125;)</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="title function_">toSearch</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="keyword">let</span> cont = <span class="variable language_">this</span>.<span class="property">data</span>.<span class="property">inputValue</span></span><br><span class="line">        <span class="keyword">if</span> (!cont) &#123; <span class="keyword">return</span> &#125; </span><br><span class="line">        wx.<span class="title function_">navigateTo</span>(&#123; <span class="attr">url</span>: <span class="string">`/pages/list/list?cont=<span class="subst">$&#123;cont&#125;</span>`</span> &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>


<h1 id="四、组件开发"><a href="#四、组件开发" class="headerlink" title="四、组件开发"></a>四、组件开发</h1><h2 id="官方组件"><a href="#官方组件" class="headerlink" title="官方组件"></a>官方组件</h2><blockquote>
<p>小程序不支持 html 标签，全部使用视图容器、基础内容等组件渲染页面。block 仅仅是一个包装元素而并不是一个组件，它只接受控制属性而不会在页面中做任何渲染。</p>
</blockquote>
  <div align="center">
      <img src="" data-original="/images/webchat/com.png" alt="小程序组件" width="100%">
  </div>



<h2 id="自定义组件"><a href="#自定义组件" class="headerlink" title="自定义组件"></a>自定义组件</h2>  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/** </span></span><br><span class="line"><span class="comment"> * <span class="doctag">@title</span> 组件和页面：组成文件相同，区别如下</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 组件 .json 文件需要声明属性 &quot;component&quot;: true</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 组件 .js 文件调用的构造器是 Component() </span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 组件的事件处理函数需要定义到节点 methods</span></span><br><span class="line"><span class="comment"> * </span></span><br><span class="line"><span class="comment"> * <span class="doctag">@title</span> 样式隔离</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> app.wxss 全局样式对组件无效，组件内外的样式互不干扰</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> class 样式默认只对当前组件生效，id 标签等无隔离效果</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> styleIsolation 配置选项可实现外部控制组件内部样式</span></span><br><span class="line"><span class="comment"> * </span></span><br><span class="line"><span class="comment"> * <span class="doctag">@title</span> 组件定义</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 1、根目录新建文件夹 components、components/item</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 2、item 右键点击新建 Component 并将其命名为 item</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 3、编辑生成文件并在页面引入：json、wxml、wxss、js</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 4、当前页面的局部引用：page.json usingComponents</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> 4、所有页面的全局引用：app.json usingComponents</span></span><br><span class="line"><span class="comment"> **/</span></span><br><span class="line"><span class="comment">// item.json：配置文件声明组件和其它可用组件</span></span><br><span class="line">&#123;</span><br><span class="line">    <span class="string">&quot;component&quot;</span>: <span class="literal">true</span>,</span><br><span class="line">    <span class="string">&quot;usingComponents&quot;</span>: &#123; </span><br><span class="line">        <span class="string">&quot;van-button&quot;</span>: <span class="string">&quot;vant-weapp/button&quot;</span>,</span><br><span class="line">        <span class="string">&quot;subItem&quot;</span>: <span class="string">&quot;/components/subItem/subItem&quot;</span> </span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// behavior.js：组件间共享代码，类似 mixins</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="title class_">Behavior</span>(&#123;</span><br><span class="line">    <span class="attr">behaviors</span>: [],</span><br><span class="line">    <span class="attr">properties</span>: &#123;</span><br><span class="line">        <span class="attr">carModel</span>: <span class="title class_">String</span>,</span><br><span class="line">        <span class="attr">price</span>: <span class="title class_">Number</span>,</span><br><span class="line">        <span class="attr">sale</span>: <span class="title class_">Boolean</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">data</span>: &#123; <span class="attr">behav</span>: <span class="string">&quot;eyes&quot;</span> &#125;,</span><br><span class="line">    <span class="attr">attached</span>: <span class="keyword">function</span>(<span class="params"></span>) &#123; &#125;,</span><br><span class="line">    <span class="attr">methods</span>: &#123; <span class="attr">behaviorMethod</span>: <span class="keyword">function</span>(<span class="params"></span>)&#123;&#125; &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// item.js：定义组件的属性方法和生命周期</span></span><br><span class="line">&lt;button bindtap=<span class="string">&quot;onTap&quot;</span>&gt;点击时触发 confirmEvent&lt;/button&gt;</span><br><span class="line"><span class="title class_">Component</span>(&#123;</span><br><span class="line">    <span class="attr">behaviors</span>: [<span class="built_in">require</span>(<span class="string">&#x27;behavior.js&#x27;</span>)],     <span class="comment">// 组件扩展</span></span><br><span class="line">    <span class="attr">relations</span>: &#123;    <span class="comment">// 组件间关系：两个组件必须都声明才会生效</span></span><br><span class="line">        <span class="string">&#x27;./custom-li&#x27;</span>: &#123;<span class="attr">type</span>: <span class="string">&#x27;child&#x27;</span>&#125;  <span class="comment">// custom-ul.js</span></span><br><span class="line">        <span class="string">&#x27;./custom-ul&#x27;</span>: &#123;<span class="attr">type</span>: <span class="string">&#x27;parent&#x27;</span>&#125; <span class="comment">// custom-li.js</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">options</span>: &#123;</span><br><span class="line">        <span class="attr">multipleSlots</span>: <span class="literal">true</span>    <span class="comment">// 支持多插槽，默认只能有一个</span></span><br><span class="line">        <span class="attr">addGlobalClass</span>: <span class="literal">true</span>,  <span class="comment">// 接受全局样式，应该尽量避免</span></span><br><span class="line">        <span class="attr">pureDataPattern</span>: <span class="regexp">/^_/</span>  <span class="comment">// 指定 _ 开头的为纯数据字段</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">properties</span>: &#123;    <span class="comment">// 接收数据的对外属性：定义方式和简写方式</span></span><br><span class="line">        <span class="attr">message</span>: <span class="title class_">String</span>,</span><br><span class="line">        <span class="attr">innerText</span>: &#123;</span><br><span class="line">            <span class="attr">type</span>: <span class="title class_">String</span>,</span><br><span class="line">            <span class="attr">value</span>: <span class="string">&quot;&quot;</span>,</span><br><span class="line">            <span class="title function_">observer</span>(<span class="params">newVal, oldVal, changedPath</span>)&#123; &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">data</span>: &#123; <span class="attr">price</span>: <span class="number">0</span>, <span class="attr">_price</span>: <span class="number">0</span> &#125;,        <span class="comment">// 组件内部数据</span></span><br><span class="line">    <span class="attr">observers</span>: &#123;                          <span class="comment">// 多个属性监听</span></span><br><span class="line">        <span class="string">&#x27;message&#x27;</span>(msg) &#123; &#125;,</span><br><span class="line">        <span class="string">&#x27;count, msg&#x27;</span>(count, msg) &#123; &#125;,</span><br><span class="line">        <span class="string">&#x27;rgb.**&#x27;</span>: <span class="keyword">function</span> (<span class="params">obj</span>) &#123; &#125;</span><br><span class="line">        <span class="string">&#x27;rgb.r, rgb.g, rgb.b&#x27;</span>: <span class="keyword">function</span> (<span class="params">r, g, b</span>) &#123; &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">methods</span>: &#123;</span><br><span class="line">        <span class="title function_">showData</span>(<span class="params"></span>)&#123;</span><br><span class="line">            <span class="variable language_">this</span>.<span class="title function_">setData</span>(&#123; <span class="attr">isShow</span>: !<span class="variable language_">this</span>.<span class="property">data</span>.<span class="property">isShow</span> &#125;)</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="comment">// triggerEvent 自定义组件触发事件：方法建议下划线开头</span></span><br><span class="line">        <span class="title function_">_confirmEvent</span>(<span class="params"></span>)&#123;</span><br><span class="line">            <span class="variable language_">this</span>.<span class="title function_">triggerEvent</span>(<span class="string">&quot;confirmEvent&quot;</span>);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">styleIsolation</span>: <span class="string">&#x27;isolated&#x27;</span>,       <span class="comment">// 默认样式隔离</span></span><br><span class="line">    <span class="attr">externalClasses</span>: [<span class="string">&#x27;tag-class&#x27;</span>],   <span class="comment">// 接受外部样式</span></span><br><span class="line">    <span class="attr">lifetimes</span>: &#123;                      <span class="comment">// 生命周期函数</span></span><br><span class="line">        <span class="title function_">created</span>(<span class="params"></span>) &#123;&#125;,     <span class="comment">// 实例创建完成</span></span><br><span class="line">        <span class="title function_">attached</span>(<span class="params"></span>) &#123;&#125;,    <span class="comment">// 节点初始化完成</span></span><br><span class="line">        <span class="title function_">ready</span>(<span class="params"></span>) &#123;&#125;,       <span class="comment">// 视图布局完成</span></span><br><span class="line">        <span class="title function_">moved</span>(<span class="params"></span>) &#123;&#125;,       <span class="comment">// 组件位置更新</span></span><br><span class="line">        <span class="title function_">detached</span>(<span class="params"></span>) &#123;&#125;     <span class="comment">// 组件卸载</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">pageLifetimes</span>: &#123;                 <span class="comment">// 组件页面的生命周期</span></span><br><span class="line">        <span class="title function_">show</span>(<span class="params"></span>) &#123; &#125;,</span><br><span class="line">        <span class="title function_">hide</span>(<span class="params"></span>) &#123; &#125;,</span><br><span class="line">        <span class="title function_">resize</span>(<span class="params"></span>) &#123; &#125;,</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// item.wxss：样式文件，只能使用类名，可指定所在节点的默认样式</span></span><br><span class="line">@<span class="keyword">import</span> <span class="string">&quot;../../app.wxss&quot;</span>;</span><br><span class="line">:host &#123;</span><br><span class="line">    <span class="attr">color</span>: yellow;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// item.wxml：模版文件</span></span><br><span class="line">&lt;view <span class="keyword">class</span>=<span class="string">&quot;tag-class&quot;</span>&gt;</span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">view</span> <span class="attr">catchtap</span>=<span class="string">&#x27;_confirmEvent&#x27;</span>&gt;</span>&#123;&#123;innerText&#125;&#125;<span class="tag">&lt;/<span class="name">view</span>&gt;</span></span></span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">view</span> <span class="attr">class</span>=<span class="string">&quot;^red-text&quot;</span>&gt;</span>引用祖先组件中定义的样式<span class="tag">&lt;/<span class="name">view</span>&gt;</span></span></span><br><span class="line">&lt;/view&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">slot</span>&gt;</span>单个插槽<span class="tag">&lt;/<span class="name">slot</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">view</span> <span class="attr">class</span>=<span class="string">&quot;wrapper&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">slot</span> <span class="attr">name</span>=<span class="string">&quot;before&quot;</span>&gt;</span>插槽 before<span class="tag">&lt;/<span class="name">slot</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">view</span> <span class="attr">class</span>=<span class="string">&quot;inner&quot;</span>&gt;</span>&#123;&#123;innerText&#125;&#125;<span class="tag">&lt;/<span class="name">view</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">slot</span> <span class="attr">name</span>=<span class="string">&quot;after&quot;</span>&gt;</span>插槽 after<span class="tag">&lt;/<span class="name">slot</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">view</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">===================== 页面文件中使用 ======================</span><br><span class="line"><span class="comment">// index.json</span></span><br><span class="line">&#123;</span><br><span class="line">  <span class="string">&quot;navigationBarTitleText&quot;</span>: <span class="string">&quot;index 页面&quot;</span>,</span><br><span class="line">  <span class="string">&quot;usingComponents&quot;</span>: &#123; <span class="string">&quot;my-item&quot;</span>: <span class="string">&quot;/components/item/item&quot;</span> &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// index.wxml</span></span><br><span class="line">&lt;view <span class="keyword">class</span>=<span class="string">&quot;wrapper&quot;</span>&gt;</span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">my-item</span> <span class="attr">innerText</span>=<span class="string">&quot;确定&quot;</span> <span class="attr">bind:confirmEvent</span>=<span class="string">&quot;_confirm&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">view</span>&gt;</span>插入到卡槽<span class="tag">&lt;/<span class="name">view</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">my-item</span>&gt;</span></span></span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">&quot;primary&quot;</span> <span class="attr">bindtap</span>=<span class="string">&quot;onClick&quot;</span>&gt;</span>Click<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">&lt;/view&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">view</span> <span class="attr">class</span>=<span class="string">&quot;wrapper&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">view</span> <span class="attr">slot</span>=<span class="string">&quot;before&quot;</span>&gt;</span>插入到卡槽 before<span class="tag">&lt;/<span class="name">view</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">view</span> <span class="attr">slot</span>=<span class="string">&quot;after&quot;</span>&gt;</span>插入到卡槽 after<span class="tag">&lt;/<span class="name">view</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">view</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="comment">// index.js</span></span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">getApp</span>()</span><br><span class="line"><span class="title class_">Page</span>(&#123;</span><br><span class="line">    <span class="attr">onReady</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">item</span> = <span class="variable language_">this</span>.<span class="title function_">selectComponent</span>(<span class="string">&quot;#item&quot;</span>);</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="title function_">onClick</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">item</span>.<span class="title function_">showData</span>();</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="title function_">_confirm</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">item</span>.<span class="title function_">hideData</span>();</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>


<h2 id="组件通信"><a href="#组件通信" class="headerlink" title="组件通信"></a>组件通信</h2>  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1、Properties 属性绑定：父传子、只支持 JSON 数据</span></span><br><span class="line">&lt;child-com num=<span class="string">&quot;11&quot;</span> msg=<span class="string">&quot;&#123;&#123;msg&#125;&#125;&quot;</span>&gt;&lt;/child-com&gt;</span><br><span class="line"></span><br><span class="line"><span class="title class_">Component</span>(&#123;</span><br><span class="line">    <span class="attr">data</span>: &#123; <span class="attr">childMsg</span>: <span class="string">&#x27;&#x27;</span> &#125;,</span><br><span class="line">    <span class="attr">properties</span>: &#123;</span><br><span class="line">        <span class="attr">num</span>: <span class="title class_">Number</span>,</span><br><span class="line">        <span class="attr">msg</span>: &#123; </span><br><span class="line">            <span class="attr">type</span>: <span class="title class_">String</span>, </span><br><span class="line">            <span class="attr">value</span>: <span class="string">&#x27;&#x27;</span>,</span><br><span class="line">            <span class="title function_">observer</span>(<span class="params">newVal, oldVal, path</span>) &#123;</span><br><span class="line">                <span class="keyword">if</span> (!newVal) <span class="keyword">return</span></span><br><span class="line">                <span class="variable language_">this</span>.<span class="title function_">setData</span>(&#123; <span class="attr">childMsg</span>: newVal &#125;)</span><br><span class="line">            &#125; </span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">methods</span>: &#123;</span><br><span class="line">        <span class="attr">doPrint</span>: <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">properties</span>.<span class="property">msg</span>)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 2、自定义事件绑定：子传父、可传递任意类型的数据</span></span><br><span class="line"><span class="variable language_">this</span>.<span class="title function_">triggerEvent</span>(<span class="string">&#x27;myevent&#x27;</span>, &#123; <span class="attr">id</span>: <span class="number">11</span> &#125;, &#123;</span><br><span class="line">    <span class="attr">bubbles</span>: <span class="literal">false</span>,       <span class="comment">// 是否冒泡</span></span><br><span class="line">    <span class="attr">composed</span>: <span class="literal">false</span>,      <span class="comment">// 能否进入组件内部</span></span><br><span class="line">    <span class="attr">capturePhase</span>: <span class="literal">false</span>   <span class="comment">// 是否存在捕获阶段</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">&lt;child-com <span class="attr">bind</span>:myevent=<span class="string">&quot;handleEvent&quot;</span>&gt;&lt;/child-com&gt;</span><br><span class="line"><span class="title class_">Component</span>(&#123;</span><br><span class="line">    <span class="attr">methods</span>: &#123;</span><br><span class="line">        <span class="attr">handleEvent</span>: <span class="keyword">function</span>(<span class="params">event</span>) &#123;</span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(event.<span class="property">detail</span>.<span class="property">id</span>)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 3、selectComponent 获取子组件的实例、可以访问任意数据和方法</span></span><br><span class="line">&lt;child-com id=<span class="string">&quot;childCom&quot;</span>&gt;&lt;/child-com&gt;</span><br><span class="line"><span class="title class_">Component</span>(&#123;</span><br><span class="line">    <span class="attr">onReady</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="keyword">let</span> childCom = <span class="variable language_">this</span>.<span class="title function_">selectComponent</span>(<span class="string">&#x27;#childCom&#x27;</span>)</span><br><span class="line">        childCom.<span class="title function_">doPrint</span>()</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>


<h1 id="五、扩展功能"><a href="#五、扩展功能" class="headerlink" title="五、扩展功能"></a>五、扩展功能</h1><h2 id="API-Promise"><a href="#API-Promise" class="headerlink" title="API Promise"></a>API Promise</h2>  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 将官方基于回调函数的异步接口改造为基于 Promise，避免回调地狱。</span></span><br><span class="line">wx.<span class="title function_">request</span>(&#123;</span><br><span class="line">    <span class="attr">method</span>: <span class="string">&#x27;&#x27;</span>,</span><br><span class="line">    <span class="attr">url</span>: <span class="string">&#x27;&#x27;</span>,</span><br><span class="line">    <span class="attr">data</span>: &#123; &#125;,</span><br><span class="line">    <span class="attr">success</span>: <span class="function">() =&gt;</span> &#123; &#125;,    <span class="comment">// 请求成功的回调函数</span></span><br><span class="line">    <span class="attr">fail</span>: <span class="function">() =&gt;</span> &#123; &#125;,       <span class="comment">// 请求失败的回调函数</span></span><br><span class="line">    <span class="attr">complete</span>: <span class="function">() =&gt;</span> &#123; &#125;,   <span class="comment">// 请求完成的回调函数</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// app.js：npm install --save miniprogram-api-promise</span></span><br><span class="line"><span class="keyword">import</span> &#123; promisifyAll &#125; <span class="keyword">from</span> <span class="string">&#x27;miniprogram-api-promise&#x27;</span></span><br><span class="line"><span class="keyword">const</span> wxp = wx.<span class="property">p</span> = &#123;&#125;</span><br><span class="line"><span class="title function_">promisifyAll</span>(wx, wxp)</span><br><span class="line"></span><br><span class="line"><span class="comment">// page.js：任意页面文件</span></span><br><span class="line"><span class="keyword">async</span> <span class="title function_">getInfo</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> &#123; <span class="attr">data</span>:res &#125; = <span class="keyword">await</span> wx.<span class="property">p</span>.<span class="title function_">request</span>(&#123;</span><br><span class="line">        <span class="attr">method</span>: <span class="string">&#x27;GET&#x27;</span>,</span><br><span class="line">        <span class="attr">url</span>: <span class="string">&#x27;https://www.escook.cn/api/get&#x27;</span>,</span><br><span class="line">        <span class="attr">data</span>: &#123; <span class="attr">name</span>: <span class="string">&#x27;张三&#x27;</span>, <span class="attr">age</span>: <span class="number">18</span> &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h2 id="状态管理"><a href="#状态管理" class="headerlink" title="状态管理"></a>状态管理</h2>  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 全局数据共享方案：安装依赖包后需要重新构建 npm</span></span><br><span class="line">npm i -S mobx-miniprogram mobx-miniprogram-bindings</span><br><span class="line"></span><br><span class="line"><span class="comment">// store.js：创建实例对象</span></span><br><span class="line"><span class="keyword">import</span> &#123; action, observable &#125; <span class="keyword">from</span> <span class="string">&#x27;mobx-miniprogram&#x27;</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> store = <span class="title function_">observable</span>(&#123;</span><br><span class="line">    <span class="attr">numA</span>: <span class="number">1</span>,</span><br><span class="line">    <span class="attr">numB</span>: <span class="number">2</span>,</span><br><span class="line">    <span class="comment">// 只读的计算属性：numA/numB 变化时自动更新 sum</span></span><br><span class="line">    <span class="keyword">get</span> <span class="title function_">sum</span>() &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">numA</span> + <span class="variable language_">this</span>.<span class="property">numB</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 修改数据的方法：不建议组件直接修改 store 数据</span></span><br><span class="line">    <span class="attr">updateNum1</span>: <span class="title function_">action</span>(<span class="keyword">function</span> (<span class="params">step</span>) &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">numA</span> += step</span><br><span class="line">    &#125;),</span><br><span class="line">    <span class="attr">updateNum2</span>: <span class="title function_">action</span>(<span class="keyword">function</span> (<span class="params">step</span>) &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">numB</span> += step</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// page.js：页面绑定</span></span><br><span class="line"><span class="keyword">import</span> &#123; createStoreBindings &#125; <span class="keyword">from</span> <span class="string">&quot;mobx-miniprogram-bindings&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; store &#125; <span class="keyword">from</span> <span class="string">&quot;../../store/store&quot;</span>;</span><br><span class="line"><span class="title class_">Page</span>(&#123;</span><br><span class="line">    <span class="attr">data</span>: &#123; &#125;,</span><br><span class="line">    <span class="attr">onLoad</span>: <span class="keyword">function</span> (<span class="params">options</span>) &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">storeBindings</span> = <span class="title function_">createStoreBindings</span>(<span class="variable language_">this</span>, &#123;</span><br><span class="line">            store,  <span class="comment">// 数据源</span></span><br><span class="line">            <span class="attr">fields</span>: [<span class="string">&#x27;numA&#x27;</span>,<span class="string">&#x27;numB&#x27;</span>,<span class="string">&#x27;sum&#x27;</span>],       <span class="comment">// 绑定字段</span></span><br><span class="line">            <span class="attr">actions</span>: [<span class="string">&#x27;updateNum1, updateNum2&#x27;</span>]  <span class="comment">// 绑定方法</span></span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">onUnload</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">storeBindings</span>.<span class="title function_">destroyStoreBindings</span>()</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="title function_">onHandle</span>(<span class="params">e</span>)&#123;      <span class="comment">// bindtap = &#x27;onHandler&#x27; </span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="title function_">updateNum1</span>(e.<span class="property">target</span>.<span class="property">dataset</span>.<span class="property">step</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// com.js：组件绑定</span></span><br><span class="line"><span class="keyword">import</span> &#123; storeBindingsBehavior &#125; <span class="keyword">from</span> <span class="string">&quot;mobx-miniprogram-bindings&quot;</span></span><br><span class="line"><span class="keyword">import</span> &#123; store &#125; <span class="keyword">from</span> <span class="string">&#x27;../../store/store&#x27;</span></span><br><span class="line"><span class="title class_">Component</span>(&#123;</span><br><span class="line">    <span class="attr">behaviors</span>: [storeBindingsBehavior],</span><br><span class="line">    <span class="attr">storeBindings</span>:&#123;</span><br><span class="line">        store,    <span class="comment">// 指定绑定的 Store</span></span><br><span class="line">        <span class="attr">fields</span>:&#123;  <span class="comment">// 绑定字段的三种方式</span></span><br><span class="line">            <span class="attr">numA</span>: <span class="function">() =&gt;</span> store.<span class="property">numA</span>,</span><br><span class="line">            <span class="attr">numB</span>: <span class="function">(<span class="params">store</span>) =&gt;</span> store.<span class="property">numB</span>,</span><br><span class="line">            <span class="attr">sum</span>: <span class="string">&#x27;sum&#x27;</span></span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">actions</span>:  &#123;</span><br><span class="line">            <span class="attr">updateNum2</span>: <span class="string">&#x27;updateNum2&#x27;</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">methods</span>: &#123;</span><br><span class="line">        <span class="title function_">onHandle</span>(<span class="params">e</span>) &#123;     <span class="comment">// bindtap = &#x27;onHandler&#x27; </span></span><br><span class="line">            <span class="variable language_">this</span>.<span class="title function_">updateNum2</span>(e.<span class="property">target</span>.<span class="property">dataset</span>.<span class="property">step</span>)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>


<h2 id="公共请求"><a href="#公共请求" class="headerlink" title="公共请求"></a>公共请求</h2><blockquote>
<p>开发工具需要允许本地地址调试：本地设置、勾选不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书。配置后就可以通过 postman 接口调用并在 Navicat 查看数据。</p>
</blockquote>
  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 项目根目录新建文件：utils/request.js</span></span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">getApp</span>()</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">function</span> <span class="title function_">request</span>(<span class="params">options = &#123;&#125;</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="keyword">function</span> (<span class="params">resolve, reject</span>) &#123;</span><br><span class="line">        wx.<span class="title function_">showLoading</span>();</span><br><span class="line">        wx.<span class="title function_">request</span>(&#123;</span><br><span class="line">            <span class="attr">url</span>: <span class="string">`<span class="subst">$&#123;app.origin&#125;</span><span class="subst">$&#123;url&#125;</span>`</span>,</span><br><span class="line">            <span class="attr">data</span>: options.<span class="property">data</span>,</span><br><span class="line">            <span class="attr">dataType</span>: options.<span class="property">dataType</span>,</span><br><span class="line">            <span class="attr">timeout</span>: options.<span class="property">timeout</span>,</span><br><span class="line">            <span class="attr">responseType</span>: options.<span class="property">responseType</span>,</span><br><span class="line">            <span class="attr">enableCache</span>: <span class="literal">false</span>,</span><br><span class="line">            <span class="attr">enableHttp2</span>: <span class="literal">false</span>,</span><br><span class="line">            <span class="attr">enableQuic</span>: <span class="literal">false</span>,</span><br><span class="line">            <span class="attr">method</span>: options.<span class="property">method</span> || <span class="string">&#x27;GET&#x27;</span>,</span><br><span class="line">            <span class="attr">header</span>: &#123;</span><br><span class="line">                <span class="string">&#x27;content-type&#x27;</span>: options.<span class="property">method</span> == <span class="string">&#x27;GET&#x27;</span> ? <span class="string">&#x27;application/json&#x27;</span></span><br><span class="line">                 : <span class="string">&#x27;application/x-www-form-urlencoded&#x27;</span>,</span><br><span class="line">                <span class="string">&#x27;cookie&#x27;</span>: wx.<span class="title function_">getStorageSync</span>(<span class="string">&quot;cookie&quot;</span>)</span><br><span class="line">            &#125;,</span><br><span class="line">            <span class="attr">success</span>: <span class="keyword">function</span> (<span class="params">res</span>) &#123;   <span class="comment">// 重新授权登录</span></span><br><span class="line">                <span class="keyword">if</span> (res.<span class="property">statusCode</span> === <span class="number">401</span>)&#123;</span><br><span class="line">                    wx.<span class="title function_">redirectTo</span>(&#123;<span class="attr">url</span>: <span class="string">&#x27;/pages/login/index&#x27;</span>&#125;)</span><br><span class="line">                &#125; <span class="keyword">else</span> <span class="keyword">if</span> (res.<span class="property">statusCode</span> !== <span class="number">200</span>) &#123;</span><br><span class="line">                    <span class="title function_">reject</span>(&#123; <span class="attr">error</span>: <span class="string">&#x27;服务器忙，请稍后重试&#x27;</span>, <span class="attr">code</span>: <span class="number">500</span> &#125;);</span><br><span class="line">                &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">                    <span class="keyword">if</span> (url === <span class="string">&#x27;/api/cdz/user/weixin/login&#x27;</span>) &#123;</span><br><span class="line">                        <span class="keyword">const</span> cookie = res.<span class="property">header</span>[<span class="string">&quot;set-cookie&quot;</span>] || </span><br><span class="line">                        res.<span class="property">header</span>[<span class="string">&quot;Set-Cookie&quot;</span>];</span><br><span class="line">                        <span class="keyword">if</span> (!cookie) &#123; <span class="keyword">return</span> &#125;</span><br><span class="line">                        wx.<span class="title function_">setStorageSync</span>(<span class="string">&quot;cookie&quot;</span>, cookie);</span><br><span class="line">                    &#125;</span><br><span class="line">                    <span class="title function_">resolve</span>(res.<span class="property">data</span>);</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            fail (err) &#123;</span><br><span class="line">                <span class="keyword">if</span> (url === <span class="string">&#x27;/api/cdz/user/weixin/login&#x27;</span>) &#123;</span><br><span class="line">                    <span class="keyword">const</span> cookie = err.<span class="property">header</span>[<span class="string">&quot;set-cookie&quot;</span>] || </span><br><span class="line">                    err.<span class="property">header</span>[<span class="string">&quot;Set-Cookie&quot;</span>];</span><br><span class="line">                    <span class="keyword">if</span> (cookie) wx.<span class="title function_">setStorageSync</span>(<span class="string">&quot;cookie&quot;</span>, cookie);</span><br><span class="line">                &#125;</span><br><span class="line">                wx.<span class="title function_">showToast</span>(&#123; <span class="attr">title</span>: <span class="string">&#x27;网络错误&#x27;</span>, <span class="attr">icon</span>: <span class="string">&#x27;none&#x27;</span> &#125;)</span><br><span class="line">                <span class="title function_">reject</span>(&#123; <span class="attr">error</span>: <span class="string">&#x27;网络错误&#x27;</span>, <span class="attr">code</span>: <span class="number">0</span> &#125;);</span><br><span class="line">            &#125;,</span><br><span class="line">            complete () &#123;</span><br><span class="line">                <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">                    wx.<span class="title function_">hideLoading</span>();</span><br><span class="line">                &#125;, <span class="number">1500</span>)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// app.js：暴露请求接口</span></span><br><span class="line"><span class="keyword">import</span> request <span class="keyword">from</span> <span class="string">&quot;../utils/request&quot;</span>;</span><br><span class="line"><span class="title class_">App</span>(&#123;</span><br><span class="line">    <span class="attr">globalData</span>: &#123; </span><br><span class="line">        <span class="attr">user</span>: <span class="literal">null</span>,</span><br><span class="line">        getUserList,</span><br><span class="line">        submitData</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">submitData</span>(<span class="params">data</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="title function_">request</span>(<span class="string">`/api/test/post`</span>, &#123; <span class="attr">method</span>: <span class="string">&#x27;POST&#x27;</span>, data &#125;)</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">getUserList</span> (data) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="title function_">request</span>(<span class="string">&#x27;/api/test/get&#x27;</span>, &#123; data &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h2 id="用户授权"><a href="#用户授权" class="headerlink" title="用户授权"></a>用户授权</h2>  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@title</span> 授权接口</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> wx.getSetting：获取已请求的权限列表</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> wx.openSetting：调起权限的设置界面</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> wx.authorize：弹窗询问用户是否授权</span></span><br><span class="line"><span class="comment">**/</span></span><br><span class="line"><span class="title class_">App</span>(&#123;</span><br><span class="line">    <span class="attr">globalData</span>: &#123; <span class="attr">APPID</span>: <span class="string">&#x27;&#x27;</span>, <span class="attr">SECRET</span>: <span class="string">&#x27;&#x27;</span>, <span class="attr">userInfo</span>: <span class="literal">null</span> &#125;,</span><br><span class="line">    <span class="attr">onLaunch</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        wx.<span class="title function_">getSetting</span>(&#123;</span><br><span class="line">            <span class="attr">success</span>: <span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">                <span class="keyword">if</span> (res.<span class="property">authSetting</span>[<span class="string">&#x27;scope.userInfo&#x27;</span>]) &#123;</span><br><span class="line">                    wx.<span class="title function_">getUserInfo</span>(&#123;</span><br><span class="line">                        <span class="attr">success</span>: <span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">                            <span class="variable language_">this</span>.<span class="property">globalData</span>.<span class="property">userInfo</span> = res.<span class="property">userInfo</span></span><br><span class="line">                            <span class="comment">// getUserInfo 请求可能在 Page.onLoad 后返回</span></span><br><span class="line">                            <span class="keyword">if</span> (<span class="variable language_">this</span>.<span class="property">userInfoReadyCallback</span>) &#123;</span><br><span class="line">                                <span class="variable language_">this</span>.<span class="title function_">userInfoReadyCallback</span>(res)</span><br><span class="line">                            &#125;</span><br><span class="line">                            wx.<span class="title function_">reLaunch</span>(&#123; <span class="attr">url</span>: <span class="string">&#x27;/pages/login/login&#x27;</span> &#125;)</span><br><span class="line">                        &#125;</span><br><span class="line">                    &#125;)</span><br><span class="line">                &#125; <span class="keyword">else</span> <span class="keyword">if</span> (res.<span class="property">authSetting</span>[<span class="string">&#x27;scope.userInfo&#x27;</span>]===<span class="literal">false</span>) &#123;</span><br><span class="line">                    wx.<span class="title function_">showModal</span>(&#123;</span><br><span class="line">                        <span class="attr">title</span>: <span class="string">&#x27;警告&#x27;</span>,</span><br><span class="line">                        <span class="attr">content</span>: <span class="string">&#x27;请授权之后再进入小程序&#x27;</span>,</span><br><span class="line">                        <span class="attr">showCancel</span>: <span class="literal">false</span>,</span><br><span class="line">                        <span class="attr">confirmText</span>: <span class="string">&#x27;返回授权&#x27;</span>,</span><br><span class="line">                        <span class="attr">success</span>: <span class="keyword">function</span> (<span class="params">res</span>) &#123;</span><br><span class="line">                            <span class="keyword">if</span> (!res.<span class="property">confirm</span>) &#123; <span class="keyword">return</span> &#125;</span><br><span class="line">                            wx.<span class="title function_">openSetting</span>(&#123;</span><br><span class="line">                            <span class="attr">success</span>: <span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">                                <span class="keyword">if</span> (res.<span class="property">authSetting</span>[<span class="string">&#x27;scope.userInfo&#x27;</span>]) &#123; </span><br><span class="line">                                    <span class="comment">// 授权成功</span></span><br><span class="line">                                &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">                                    wx.<span class="title function_">showToast</span>(&#123;</span><br><span class="line">                                        <span class="attr">title</span>: <span class="string">&#x27;你拒绝了授权，无法查看内容&#x27;</span>,</span><br><span class="line">                                        <span class="attr">icon</span>: <span class="string">&#x27;none&#x27;</span>,</span><br><span class="line">                                        <span class="attr">duration</span>: <span class="number">3000</span>,</span><br><span class="line">                                    &#125;)</span><br><span class="line">                                &#125;</span><br><span class="line">                            &#125;</span><br><span class="line">                            &#125;)</span><br><span class="line">                        &#125;</span><br><span class="line">                    &#125;);</span><br><span class="line">                &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">                    wx.<span class="title function_">authorize</span>(&#123;</span><br><span class="line">                        <span class="attr">scope</span>: <span class="string">&#x27;scope.userInfo&#x27;</span>,</span><br><span class="line">                        <span class="attr">success</span>: <span class="function"><span class="params">res</span> =&gt;</span> &#123;  &#125;</span><br><span class="line">                    &#125;)</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">&lt;view <span class="keyword">class</span>=<span class="string">&quot;container&quot;</span>&gt;</span><br><span class="line">　　 <span class="language-xml"><span class="tag">&lt;<span class="name">view</span> <span class="attr">class</span>=<span class="string">&#x27;content&#x27;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">　　　　<span class="tag">&lt;<span class="name">view</span>&gt;</span>申请获取以下权限<span class="tag">&lt;/<span class="name">view</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">　　　　<span class="tag">&lt;<span class="name">text</span>&gt;</span>获得你的公开信息(昵称，头像等)<span class="tag">&lt;/<span class="name">text</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">　　 <span class="tag">&lt;/<span class="name">view</span>&gt;</span></span></span><br><span class="line">　　 <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> </span></span></span><br><span class="line"><span class="tag"><span class="language-xml">        <span class="attr">type</span>=<span class="string">&#x27;primary&#x27;</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">        <span class="attr">wx:if</span>=<span class="string">&quot;&#123;&#123;canIUse&#125;&#125;&quot;</span> </span></span></span><br><span class="line"><span class="tag"><span class="language-xml">        <span class="attr">open-type</span>=<span class="string">&quot;getUserInfo&quot;</span> </span></span></span><br><span class="line"><span class="tag"><span class="language-xml">        <span class="attr">bindgetuserinfo</span>=<span class="string">&quot;bindGetUserInfo&quot;</span> </span></span></span><br><span class="line"><span class="tag"><span class="language-xml">    &gt;</span>旧版授权登录：新版使用 bindtap=&quot;getUserProfile&quot;<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">&lt;/view&gt;</span><br><span class="line"><span class="title function_">page</span>(&#123;</span><br><span class="line">    <span class="attr">data</span>: &#123;</span><br><span class="line">        <span class="attr">userInfo</span>: &#123;&#125;,</span><br><span class="line">        <span class="attr">canIUse</span>: wx.<span class="title function_">canIUse</span>(<span class="string">&#x27;button.open-type.getUserInfo&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="attr">onLoad</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="keyword">if</span> (app.<span class="property">globalData</span>.<span class="property">userInfo</span>) &#123;</span><br><span class="line">            <span class="variable language_">this</span>.<span class="title function_">setData</span>(&#123; <span class="attr">userInfo</span>: app.<span class="property">globalData</span>.<span class="property">userInfo</span> &#125;)</span><br><span class="line">        &#125; <span class="keyword">else</span> <span class="keyword">if</span> (<span class="variable language_">this</span>.<span class="property">data</span>.<span class="property">canIUse</span>)&#123;</span><br><span class="line">            app.<span class="property">userInfoReadyCallback</span> = <span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">                <span class="variable language_">this</span>.<span class="title function_">setData</span>(&#123; <span class="attr">userInfo</span>: res.<span class="property">userInfo</span> &#125;)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;  <span class="comment">// open-type=getUserInfo 没有时的兼容处理</span></span><br><span class="line">            wx.<span class="title function_">getUserInfo</span>(&#123;</span><br><span class="line">                <span class="attr">success</span>: <span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">                    app.<span class="property">globalData</span>.<span class="property">userInfo</span> = res.<span class="property">userInfo</span></span><br><span class="line">                    <span class="variable language_">this</span>.<span class="title function_">setData</span>(&#123; <span class="attr">userInfo</span>: res.<span class="property">userInfo</span> &#125;)</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,  </span><br><span class="line">    <span class="attr">bindGetUserInfo</span>: <span class="keyword">function</span> (<span class="params">e</span>) &#123;   <span class="comment">// 按钮点击事件</span></span><br><span class="line">        <span class="keyword">if</span> (!e.<span class="property">detail</span>.<span class="property">userInfo</span>) &#123; <span class="keyword">return</span> &#125;</span><br><span class="line">        wx.<span class="title function_">login</span>(&#123; <span class="attr">success</span>: <span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">            <span class="keyword">if</span> (!res.<span class="property">code</span>) &#123;</span><br><span class="line">                <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;登录失败！&#x27;</span> + res.<span class="property">errMsg</span>)</span><br><span class="line">                <span class="keyword">return</span></span><br><span class="line">            &#125;</span><br><span class="line">            <span class="comment">// 实际应用中调用 java 接口即可，不可直接调用 api.weixin.qq.com</span></span><br><span class="line">            wx.<span class="title function_">request</span>(&#123; </span><br><span class="line">                <span class="attr">url</span>: <span class="string">&#x27;https://api.weixin.qq.com/sns/jscode2session?&#x27;</span></span><br><span class="line">                + <span class="string">`appid=<span class="subst">$&#123;APPID&#125;</span>&amp;secret=<span class="subst">$&#123;SECRET&#125;</span>&amp;js_code=<span class="subst">$&#123;res.code&#125;</span>`</span></span><br><span class="line">                + <span class="string">&#x27;&amp;grant_type=authorization_code&#x27;</span>,</span><br><span class="line">                <span class="attr">success</span>: <span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">                    app.<span class="property">globaData</span>.<span class="property">openid</span> = res.<span class="property">data</span>.<span class="property">openid</span></span><br><span class="line">                    wx.<span class="title function_">reLaunch</span>(&#123; <span class="attr">url</span>: <span class="string">&#x27;/pages/index/index&#x27;</span> &#125;)</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;);</span><br><span class="line">        &#125;&#125;)</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">getUserProfile</span>: <span class="keyword">function</span> (<span class="params">e</span>) &#123;</span><br><span class="line">        wx.<span class="title function_">getUserProfile</span>(&#123;</span><br><span class="line">            <span class="attr">desc</span>: <span class="string">&#x27;展示用户信息&#x27;</span>,</span><br><span class="line">            <span class="attr">success</span>: <span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">                <span class="keyword">const</span> &#123;nickName, gender, avatarUrl&#125; = res.<span class="property">userInfo</span>;</span><br><span class="line">                <span class="variable language_">this</span>.<span class="title function_">setData</span>(&#123; nickName, gender, avatarUrl &#125;)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h2 id="地理位置"><a href="#地理位置" class="headerlink" title="地理位置"></a>地理位置</h2>  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// pages/index/index.wxml</span></span><br><span class="line">&lt;scroll-view <span class="keyword">class</span>=<span class="string">&quot;scrollarea&quot;</span> scroll-y type=<span class="string">&quot;list&quot;</span>&gt;</span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">view</span> <span class="attr">class</span>=<span class="string">&quot;view1&quot;</span> <span class="attr">bindtap</span>=<span class="string">&quot;getLocation&quot;</span>&gt;</span>获取当前位置<span class="tag">&lt;/<span class="name">view</span>&gt;</span></span></span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">view</span>&gt;</span>经度：&#123;&#123;longitude&#125;&#125;<span class="tag">&lt;/<span class="name">view</span>&gt;</span></span></span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">view</span>&gt;</span>纬度：&#123;&#123;latitude&#125;&#125;<span class="tag">&lt;/<span class="name">view</span>&gt;</span></span></span><br><span class="line">&lt;/scroll-view&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">// pages/index/index.js</span></span><br><span class="line"><span class="title class_">Component</span>(&#123;</span><br><span class="line">  <span class="attr">data</span>: &#123; <span class="attr">longitude</span>: <span class="number">0</span>, <span class="attr">latitude</span>: <span class="number">0</span> &#125;,</span><br><span class="line">  <span class="attr">methods</span>: &#123;</span><br><span class="line">    <span class="title function_">getLocation</span>(<span class="params"></span>) &#123;</span><br><span class="line">      <span class="keyword">var</span> that = <span class="variable language_">this</span>;</span><br><span class="line">      wx.<span class="title function_">getLocation</span>(&#123;</span><br><span class="line">          <span class="attr">type</span>: <span class="string">&#x27;gcj02&#x27;</span>,</span><br><span class="line">          success (res) &#123;</span><br><span class="line">              <span class="keyword">const</span> &#123; latitude, longitude &#125; = res</span><br><span class="line">              that.<span class="title function_">setData</span>(&#123; latitude, longitude &#125;)</span><br><span class="line">          &#125;,</span><br><span class="line">          <span class="attr">fail</span>: <span class="keyword">function</span> (<span class="params">error</span>) &#123;</span><br><span class="line">              wx.<span class="title function_">showModal</span>(&#123;</span><br><span class="line">                  <span class="attr">title</span>: <span class="string">&#x27;授权提示&#x27;</span>,</span><br><span class="line">                  <span class="attr">showCancel</span>: <span class="literal">false</span>,</span><br><span class="line">                  <span class="attr">content</span>: <span class="string">&#x27;需要获取地理位置，请打开设置页面手动授权！&#x27;</span>,</span><br><span class="line">                  <span class="attr">success</span>: <span class="keyword">function</span> (<span class="params">modalRes</span>) &#123;</span><br><span class="line">                      <span class="keyword">if</span> (!modalRes.<span class="property">confirm</span>) &#123; <span class="keyword">return</span> &#125;</span><br><span class="line">                      wx.<span class="title function_">openSetting</span>(&#123; <span class="attr">success</span>: <span class="keyword">function</span> (<span class="params">set</span>) &#123;</span><br><span class="line">                          <span class="keyword">if</span> (set.<span class="property">authSetting</span>[<span class="string">&#x27;scope.userLocation&#x27;</span>]) &#123;</span><br><span class="line">                              <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;用户已手动授权&#x27;</span>);</span><br><span class="line">                          &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">                              <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;用户拒绝授权&#x27;</span>);</span><br><span class="line">                          &#125;</span><br><span class="line">                      &#125;&#125;);</span><br><span class="line">                  &#125;</span><br><span class="line">              &#125;);</span><br><span class="line">          &#125;</span><br><span class="line">      &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// app.json：添加配置信息</span></span><br><span class="line">&#123;</span><br><span class="line">    <span class="string">&quot;permission&quot;</span>: &#123;</span><br><span class="line">        <span class="string">&quot;scope.userLocation&quot;</span>: &#123;</span><br><span class="line">            <span class="string">&quot;desc&quot;</span>: <span class="string">&quot;你的位置信息将用于小程序位置接口的效果展示&quot;</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="string">&quot;requiredPrivateInfos&quot;</span>: [<span class="string">&quot;getLocation&quot;</span>]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h2 id="分享功能"><a href="#分享功能" class="headerlink" title="分享功能"></a>分享功能</h2>  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 开启分享：wx.getShareInfo 可传入 shareTicket 获取转发信息</span></span><br><span class="line"><span class="title function_">onLaunch</span>(<span class="params"></span>) &#123;</span><br><span class="line">    wx.<span class="title function_">showShareMenu</span>(&#123;</span><br><span class="line">        <span class="attr">withShareTicket</span>: <span class="literal">true</span>,  <span class="comment">// 携带 shareTicket  </span></span><br><span class="line">        <span class="attr">menus</span>: [<span class="string">&#x27;shareAppMessage&#x27;</span>, <span class="string">&#x27;shareTimeline&#x27;</span>]</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;,</span><br><span class="line"><span class="attr">methods</span>: &#123;</span><br><span class="line">    <span class="title function_">onShareAppMessage</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            <span class="attr">title</span>: <span class="string">&quot;分享给好友&quot;</span>,</span><br><span class="line">            <span class="attr">path</span>: <span class="string">&quot;/pages/index/index&quot;</span>,</span><br><span class="line">            <span class="attr">imageUrl</span>: <span class="string">&quot;/assets/imgs/share.png&quot;</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="title function_">onShareTimeline</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            <span class="attr">title</span>: <span class="string">&quot;分享到朋友圈&quot;</span>,</span><br><span class="line">            <span class="attr">query</span>: <span class="string">&quot;/pages/index/index&quot;</span>,</span><br><span class="line">            <span class="attr">imageUrl</span>: <span class="string">&quot;/assets/imgs/share.png&quot;</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>



<h2 id="小程序跳转"><a href="#小程序跳转" class="headerlink" title="小程序跳转"></a>小程序跳转</h2>  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 配置目标小程序允许小程序跳转、获取小程序的 appId path</span></span><br><span class="line"><span class="title function_">jumpMiniProgram</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> wxAppId = <span class="variable language_">this</span>.<span class="property">data</span>.<span class="property">wx_appid</span>;</span><br><span class="line">    <span class="keyword">let</span> wxAppPath = <span class="variable language_">this</span>.<span class="property">data</span>.<span class="property">wx_path</span>;</span><br><span class="line">    wx.<span class="title function_">navigateToMiniProgram</span>(&#123;</span><br><span class="line">        <span class="attr">appId</span>: wxAppId,</span><br><span class="line">        <span class="attr">path</span>: wxAppPath,</span><br><span class="line">        <span class="title function_">success</span>(<span class="params">res</span>) &#123;</span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(res, <span class="string">&#x27;success&#x27;</span>);</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="title function_">fail</span>(<span class="params">err</span>) &#123;</span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(err, <span class="string">&quot;error&quot;</span>);</span><br><span class="line">        &#125; </span><br><span class="line">    &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="摇一摇抽奖"><a href="#摇一摇抽奖" class="headerlink" title="摇一摇抽奖"></a>摇一摇抽奖</h2>  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// util/shake.js</span></span><br><span class="line"><span class="keyword">let</span> shakeInfo = &#123;</span><br><span class="line">    <span class="attr">openFlag</span>: <span class="literal">false</span>,    <span class="comment">// 是否开启摇一摇</span></span><br><span class="line">    <span class="attr">shakeSpeed</span>: <span class="number">110</span>,    <span class="comment">// 设置阈值：越小越灵敏</span></span><br><span class="line">    <span class="attr">shakeStep</span>: <span class="number">2000</span>,    <span class="comment">// 摇一摇成功后间隔</span></span><br><span class="line">    <span class="attr">lastTime</span>: <span class="number">0</span>,        <span class="comment">// 记录上次摇动时间</span></span><br><span class="line">    <span class="attr">x</span>: <span class="number">0</span>,               <span class="comment">// 三轴和上次的数值</span></span><br><span class="line">    <span class="attr">y</span>: <span class="number">0</span>,</span><br><span class="line">    <span class="attr">z</span>: <span class="number">0</span>,</span><br><span class="line">    <span class="attr">lastX</span>: <span class="number">0</span>,</span><br><span class="line">    <span class="attr">lastY</span>: <span class="number">0</span>,</span><br><span class="line">    <span class="attr">lastZ</span>: <span class="number">0</span>,         </span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">//开启摇一摇</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">openShakeEvent</span>(<span class="params"></span>) &#123;</span><br><span class="line">  shakeInfo.<span class="property">openFlag</span> = <span class="literal">true</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//关闭摇一摇</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">closeShakeEvent</span>(<span class="params"></span>) &#123;</span><br><span class="line">  shakeInfo.<span class="property">openFlag</span> = <span class="literal">false</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//摇一摇成功</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">shakeOk</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="title function_">closeShakeEvent</span>();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 判断是否为摇一摇</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">shake</span>(<span class="params">acceleration, successCallback</span>) &#123;</span><br><span class="line">  <span class="keyword">if</span> (!shakeInfo.<span class="property">openFlag</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span>;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">var</span> nowTime = <span class="keyword">new</span> <span class="title class_">Date</span>().<span class="title function_">getTime</span>(); <span class="comment">//记录当前时间</span></span><br><span class="line">  <span class="comment">//如果这次摇的时间距离上次摇的时间有一定间隔 才执行</span></span><br><span class="line">  <span class="keyword">if</span> (nowTime - shakeInfo.<span class="property">lastTime</span> &gt; <span class="number">100</span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> diffTime = nowTime - shakeInfo.<span class="property">lastTime</span>; <span class="comment">//记录时间段</span></span><br><span class="line">    shakeInfo.<span class="property">lastTime</span> = nowTime; <span class="comment">//记录本次摇动时间</span></span><br><span class="line">    shakeInfo.<span class="property">x</span> = acceleration.<span class="property">x</span>; <span class="comment">//获取 x 轴数值</span></span><br><span class="line">    shakeInfo.<span class="property">y</span> = acceleration.<span class="property">y</span>; <span class="comment">//获取 y 轴数值</span></span><br><span class="line">    shakeInfo.<span class="property">z</span> = acceleration.<span class="property">z</span>; <span class="comment">//获取 z 轴数值</span></span><br><span class="line">    <span class="comment">//计算摇一摇的速度</span></span><br><span class="line">    <span class="keyword">var</span> speed = <span class="title class_">Math</span>.<span class="title function_">abs</span>(shakeInfo.<span class="property">x</span> + shakeInfo.<span class="property">y</span> + shakeInfo.<span class="property">z</span> - shakeInfo.<span class="property">lastX</span> - shakeInfo.<span class="property">lastY</span> - shakeInfo.<span class="property">lastZ</span>) / diffTime * <span class="number">10000</span>;</span><br><span class="line">    <span class="keyword">if</span> (speed &gt; shakeInfo.<span class="property">shakeSpeed</span>) &#123; <span class="comment">//如果计算出来的摇一摇幅度足够大，那么认为用户摇一摇成功</span></span><br><span class="line">      <span class="title function_">successCallback</span>();</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//赋值，为下一次计算做准备</span></span><br><span class="line">    shakeInfo.<span class="property">lastX</span> = shakeInfo.<span class="property">x</span>;</span><br><span class="line">    shakeInfo.<span class="property">lastY</span> = shakeInfo.<span class="property">y</span>;</span><br><span class="line">    shakeInfo.<span class="property">lastZ</span> = shakeInfo.<span class="property">z</span>; </span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">openShakeEvent</span>: openShakeEvent,</span><br><span class="line">  <span class="attr">closeShakeEvent</span>: closeShakeEvent,</span><br><span class="line">  <span class="attr">shake</span>: shake,</span><br><span class="line">  <span class="attr">shakeOk</span>: shakeOk</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>



    </div>

    
    
    <div>
      
        <div>
    
        <div style="text-align:center;color: #ccc;font-size:14px;margin-top:20px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
    
</div>

      
    </div>
    
        

<div>
<ul class="post-copyright">
  <li class="post-copyright-author">
    <strong>本文作者： </strong>chuangges
  </li>
  <li class="post-copyright-link">
    <strong>本文链接：</strong>
    <a href="https://chuangges.gitee.io/2019/07/07/9-1-%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%85%A5%E9%97%A8/" title="微信小程序入门">https://chuangges.gitee.io/2019/07/07/9-1-微信小程序入门/</a>
  </li>
  <li class="post-copyright-license">
    <strong>版权声明： </strong>本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/zh_CN" rel="external nofollow noopener noreferrer" target="_blank"><i class="fab fa-fw fa-creative-commons"></i>BY-NC-SA</a> 许可协议。转载请注明出处！
  </li>
</ul>
</div>


      <footer class="post-footer">

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2019/06/28/8-4-%E7%A7%BB%E5%8A%A8%E7%AB%AF%E9%9A%BE%E7%82%B9/" rel="prev" title="移动端技术难点">
      <i class="fa fa-chevron-left"></i> 移动端技术难点
    </a></div>
      <div class="post-nav-item">
    <a href="/2019/08/03/9-2-%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%BC%80%E5%8F%91/" rel="next" title="微信小程序项目开发">
      微信小程序项目开发 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%B8%80%E3%80%81%E5%85%A5%E9%97%A8%E7%AE%80%E4%BB%8B"><span class="nav-number">1.</span> <span class="nav-text">一、入门简介</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%BB%E8%A6%81%E7%89%B9%E7%82%B9"><span class="nav-number">1.1.</span> <span class="nav-text">主要特点</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%A0%B8%E5%BF%83%E6%9C%BA%E5%88%B6"><span class="nav-number">1.2.</span> <span class="nav-text">核心机制</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%B3%A8%E5%86%8C%E5%BC%80%E5%8F%91"><span class="nav-number">1.3.</span> <span class="nav-text">注册开发</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%BA%8C%E3%80%81%E8%A7%86%E5%9B%BE%E5%B1%82"><span class="nav-number">2.</span> <span class="nav-text">二、视图层</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#WXML-%E6%A8%A1%E7%89%88"><span class="nav-number">2.1.</span> <span class="nav-text">WXML 模版</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#WXSS-%E6%A0%B7%E5%BC%8F"><span class="nav-number">2.2.</span> <span class="nav-text">WXSS 样式</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#WXS-%E6%A8%A1%E5%9D%97"><span class="nav-number">2.3.</span> <span class="nav-text">WXS 模块</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%B8%89%E3%80%81%E9%80%BB%E8%BE%91%E5%B1%82"><span class="nav-number">3.</span> <span class="nav-text">三、逻辑层</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%A8%8B%E5%BA%8F%E6%B3%A8%E5%86%8C"><span class="nav-number">3.1.</span> <span class="nav-text">程序注册</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%A1%B5%E9%9D%A2%E6%B3%A8%E5%86%8C"><span class="nav-number">3.2.</span> <span class="nav-text">页面注册</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%98%E6%96%B9-API"><span class="nav-number">3.3.</span> <span class="nav-text">官方 API</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%B7%AF%E7%94%B1%E6%9C%BA%E5%88%B6"><span class="nav-number">3.4.</span> <span class="nav-text">路由机制</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%95%B0%E6%8D%AE%E4%BC%A0%E9%80%92"><span class="nav-number">3.5.</span> <span class="nav-text">数据传递</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%9B%9B%E3%80%81%E7%BB%84%E4%BB%B6%E5%BC%80%E5%8F%91"><span class="nav-number">4.</span> <span class="nav-text">四、组件开发</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%98%E6%96%B9%E7%BB%84%E4%BB%B6"><span class="nav-number">4.1.</span> <span class="nav-text">官方组件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6"><span class="nav-number">4.2.</span> <span class="nav-text">自定义组件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1"><span class="nav-number">4.3.</span> <span class="nav-text">组件通信</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%BA%94%E3%80%81%E6%89%A9%E5%B1%95%E5%8A%9F%E8%83%BD"><span class="nav-number">5.</span> <span class="nav-text">五、扩展功能</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#API-Promise"><span class="nav-number">5.1.</span> <span class="nav-text">API Promise</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86"><span class="nav-number">5.2.</span> <span class="nav-text">状态管理</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%AC%E5%85%B1%E8%AF%B7%E6%B1%82"><span class="nav-number">5.3.</span> <span class="nav-text">公共请求</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%94%A8%E6%88%B7%E6%8E%88%E6%9D%83"><span class="nav-number">5.4.</span> <span class="nav-text">用户授权</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%9C%B0%E7%90%86%E4%BD%8D%E7%BD%AE"><span class="nav-number">5.5.</span> <span class="nav-text">地理位置</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%86%E4%BA%AB%E5%8A%9F%E8%83%BD"><span class="nav-number">5.6.</span> <span class="nav-text">分享功能</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%B7%B3%E8%BD%AC"><span class="nav-number">5.7.</span> <span class="nav-text">小程序跳转</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%91%87%E4%B8%80%E6%91%87%E6%8A%BD%E5%A5%96"><span class="nav-number">5.8.</span> <span class="nav-text">摇一摇抽奖</span></a></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="chuangges" src="" data-original="/images/chuang.png">
  <p class="site-author-name" itemprop="name">chuangges</p>
  <div class="site-description" itemprop="description">chuangge's blog.</div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">39</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
          
        <span class="site-state-item-count">7</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">7</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/chuangges" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;chuangges" rel="external nofollow noopener noreferrer" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="https://stackoverflow.com/yourname" title="StackOverflow → https:&#x2F;&#x2F;stackoverflow.com&#x2F;yourname" rel="external nofollow noopener noreferrer" target="_blank"><i class="fab fa-stack-overflow fa-fw"></i>StackOverflow</a>
      </span>
  </div>


  <div class="links-of-blogroll motion-element">
    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
      友情链接
    </div>
    <ul class="links-of-blogroll-list">
        <li class="links-of-blogroll-item">
          <a href="https://juejin.im/" title="https:&#x2F;&#x2F;juejin.im&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">掘金</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://www.nowcoder.com/" title="https:&#x2F;&#x2F;www.nowcoder.com&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">牛客网</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://www.docschina.org/" title="https:&#x2F;&#x2F;www.docschina.org&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">印记中文</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="http://tool.lu/" title="http:&#x2F;&#x2F;tool.lu&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">在线工具</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://tinypng.com/" title="https:&#x2F;&#x2F;tinypng.com&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">图片压缩</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://bigjpg.com/" title="https:&#x2F;&#x2F;bigjpg.com&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">图片放大</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://tool.chinaz.com/" title="https:&#x2F;&#x2F;tool.chinaz.com&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">站长工具</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://learn-anything.xyz/" title="https:&#x2F;&#x2F;learn-anything.xyz&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">Learn-Anything</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://stackoverflow.com/" title="https:&#x2F;&#x2F;stackoverflow.com&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">Stack-Overflow</a>
        </li>
    </ul>
  </div>

      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2024</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">chuangge</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-chart-area"></i>
    </span>
    <span title="站点总字数">1m</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
    <span title="站点阅读时长">15:14</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="external nofollow noopener noreferrer" target="_blank">Hexo</a> & <a href="https://pisces.theme-next.org/" class="theme-link" rel="external nofollow noopener noreferrer" target="_blank">NexT.Pisces</a> 强力驱动
  </div>

        








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/pisces.js"></script>


<script src="/js/next-boot.js"></script>




  















  

  

<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","model":{"jsonPath":"/live2dw/assets/tororo.model.json"},"display":{"position":"left","width":180,"height":360},"mobile":{"show":false},"react":{"opacityDefault":1,"opacityOnHover":1},"log":false,"tagMode":false});</script>
        <style>
            [bg-lazy] {
                background-image: none !important;
                background-color: #eee !important;
            }
        </style>
        <script>
            window.imageLazyLoadSetting = {
                isSPA: false,
                preloadRatio: 1,
                processImages: null,
            };
        </script><script>window.addEventListener("load",function(){var t=/\.(gif|jpg|jpeg|tiff|png)$/i,r=/^data:image\/[a-z]+;base64,/;Array.prototype.slice.call(document.querySelectorAll("img[data-original]")).forEach(function(a){var e=a.parentNode;"A"===e.tagName&&(e.href.match(t)||e.href.match(r))&&(e.href=a.dataset.original)})});</script><script>!function(e){e.imageLazyLoadSetting.processImages=t;var n=e.imageLazyLoadSetting.isSPA,i=e.imageLazyLoadSetting.preloadRatio||1,r=o();function o(){var t=Array.prototype.slice.call(document.querySelectorAll("img[data-original]")),e=Array.prototype.slice.call(document.querySelectorAll("[bg-lazy]"));return t.concat(e)}function t(){n&&(r=o());for(var t,a=0;a<r.length;a++)0<=(t=(t=r[a]).getBoundingClientRect()).bottom&&0<=t.left&&t.top<=(e.innerHeight*i||document.documentElement.clientHeight*i)&&function(){var t,e,n,i,o=r[a];e=function(){r=r.filter(function(t){return o!==t})},(t=o).hasAttribute("bg-lazy")?(t.removeAttribute("bg-lazy"),e&&e()):(n=new Image,i=t.getAttribute("data-original"),n.onload=function(){t.src=i,t.removeAttribute("data-original"),e&&e()},t.src!==i&&(n.src=i))}()}function a(){clearTimeout(t.tId),t.tId=setTimeout(t,500)}t(),document.addEventListener("scroll",a),e.addEventListener("resize",a),e.addEventListener("orientationchange",a)}(this);</script></body>
</html>
